2

Здравствуйте. Мне нужно сделать галерею в которой картинка сначала растягивается по ширине, а затем по длине. Помогите сделать чтобы картинка при еще одном клике возвращалась назад. Также некоторые картинки не перекрывают друг друга.

<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>

1 ответ 1

1

Вот исправил ваш код, добавил класс active на элемент на которой кликаешь, и проверяю если элемент активен то уменьшаю его высоту и ширину.

$(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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.