Форум

ufaclub · #1 (**permalink**) 09.07.2017, 22:54

вот так вывожу большую картинку

<div class="product-gallery">			
<img src="/i/catalog/1.png" width="400" height="400" >
</div>

вот так внизу ссылки на превью маленькие

<a  href="#"><img src="/i/catalog/1.png"></a>
<a  href="#"><img src="/i/catalog/2.png"></a>
<a  href="#"><img src="/i/catalog/3.png"></a>
<a  href="#"><img src="/i/catalog/4.png"></a>

как сделать чтобы при клике например на 3 ссылку картинка поменялась в <div class="product-gallery>

на

<img src="/i/catalog/3.png" width="400" height="400" >

желательно чтобы смена произошла через

fadein fadeout jquery

Помогите пожалуйста!

j0hnik · #2 (**permalink**) 10.07.2017, 00:13

<html>
<head>
</head>

<div class="product-gallery">        
	<img src="/i/catalog/1.png" width="400" height="400" >
</div>
<a  href="#"><img src="/i/catalog/1.png"></a>
<a  href="#"><img src="/i/catalog/2.png"></a>
<a  href="#"><img src="/i/catalog/3.png"></a>
<a  href="#"><img src="/i/catalog/4.png"></a>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script>
$('a > img').click(function(e){
e.preventDefault();
var el = this;
$('.product-gallery>img').fadeOut("slow", function() {
$(this).fadeIn("slow", "linear").attr('src', el.src);
});
});
	</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript