взять из ссылки url и подставить его в img src
вот так вывожу большую картинку
<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 Помогите пожалуйста! :) |
<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> |
Часовой пояс GMT +3, время: 19:23. |