Gallery on jquery

Question

Gallery on jquery

Hello. I need to make a gallery in which the picture is first stretched in width, and then in length. Help me to make the image go back with another click. Also, some images do not overlap each other.

<script>
 $(document).ready(function() {
   $(".photo").bind("click", function(event) {
    /*$(event.target).parent().css("text-align", "center");*/
    $(event.target).css("position", "absolute");
    $(event.target).css("left", "45px");
    $(event.target).css("margin-top", "180px");
    $(event.target).animate({
      width: $(event.target).width() * 5,
      height: $(event.target).height() * 1,
    }, 3000);
    $(event.target).animate({
      height: $(event.target).height() * 5,
    }, 3000);
  });
});
 </script>


<p id="slider">
    <img class="photo" src="01.jpg" alt="картинка" id="img" width="200px" />
    <img class="photo" src="02.jpg" alt="картинка" id="img" width="200px" />
    <img class="photo" src="03.jpg" alt="картинка" id="img" width="200px" />
</p>

2

javascript jquery слайдер gallery

Author: Volodymyr Zelenyi, 2017-06-05

Source

1 answers

score 1 · Accepted Answer

Here I fixed your code, added the active class to the element you click on, and I check if the element is active, then I reduce its height and width.

$(document).ready(function() {
   $(".photo").bind("click", function(event) {
    if($(this).hasClass('active')){      
      $(this).animate({
        width: $(this).width() / 3,
		height: $(event.target).height() / 1,
      }, 1500,function(){
		$(this).animate({
			height: $(this).height() / 3,
		  }, 1500,function(){
			$(this).removeClass('active');
			$(this).css("position", "static");
			$(this).css("margin-top", "0");
		  })
	  });
    }
    else{
	  $(this).addClass('active');
	  $(this).css("position", "absolute");
	  $(this).css("left", "45px");
	  $(this).css("margin-top", "180px");
      $(this).animate({
        width: $(this).width() * 3,
		height: $(this).height() * 1,
      }, 1500,function(){
		$(this).animate({
		height: $(this).height() * 3,
		}, 1500)
	  });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p id="slider">
    <img class="photo" src="http://4.bp.blogspot.com/-uVpL-stvY3A/VOjA8Pblu3I/AAAAAAAACgw/KLIKxsNbo3Y/s1600/Google%2BDomains.png" alt="картинка" id="img" width="200px" />
    <img class="photo" src="http://www.codestore.net/store.nsf/rsrc/incstan01/$file/firstSVG.gif" alt="картинка" id="img" width="200px" />
    <img class="photo" src="http://smalldata.io/startup/common-files/icons/sdl_logo.png" alt="картинка" id="img" width="200px" />
</p>