Галерея на jquery

381

07 июня 2017, 03:38

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

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

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Почему некорректно работает fullpage.js?

ЗдравствуйтеЕсть небольшая тестовая страничка alexbeos

383

jQuery

Скажите, в чем разница между двумя интерпретациями обратного вызова

Вариант 1

326

jQuery

Как сделать так чтобы при пустом input определённый элемент скрывался?

Написал так: когда начинаешь печатать в input появляется span, но дело в том, что если потом стереть то, что написал, то этот span остаётся, а надо...

339

CSS

MS EDGE, MS IE не понимает размытие filter: blur

Как мне им дать понять что блок нужно мылить? Или никак? Только канвас?

402