javascript - Using toggleClass to toggle between image heights, 250px - 450px? -
i building website image heavy, portfolio site.
i have masonry type gallery each image set 250px height default. wish create hyperlink/button let user decide if want view images @ normal size (250px) or @ larger size (450px).
the images loaded inside div called #imagegallery
, understand best way have button once clicked, add/toggle/remove class resize images in div 450px.
seems basic usage of toggleclass
jquery function.
$('#togglebtn').click(function(){ $('.item').toggleclass( "expand" ); });
.item{ height:250px; } .expand{ height:450px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="togglebtn">toggle</button> <div id="imagegallery"> <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcrabcf7stpcrmmzxkwuyopewievnyqzvvtj_f79-zj0tfscn5njuq" /> <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcrabcf7stpcrmmzxkwuyopewievnyqzvvtj_f79-zj0tfscn5njuq" /> </div>
Comments
Post a Comment