Динамическая Смена Изображения Товара
#1
Отправлено 13 Январь 2014 - 11:14
Подскажите как реализовать динамическую смену изображения товара, чтоб оно выводило по порядку все изображения.
#2
Отправлено 14 Январь 2014 - 02:14
$(function() { if($('.zoomicon a').length) { var jnzoom = 0; setInterval(function() { var img = $('.zoomicon:eq(' + jnzoom + ') a'); var MediumImageUrl = $(img).find('img').attr('rel'), MainImage = $('.fullimg img'), MainImageIdObject = $('.fullimg input'), GoodsImageIconId = $(img).parent().find('input').attr("rel"); MainImage.attr('src',MediumImageUrl); MainImageIdObject.attr("rel",GoodsImageIconId); jnzoom = $('.zoomicon:eq(' + (jnzoom + 1) + ') a').length ? ++jnzoom : 0; }, 3000); } });
просто добавив его в ваш файл main.js
#3
Отправлено 14 Январь 2014 - 08:36
Сake (14 Январь 2014 - 02:14) писал:
$(function() { if($('.zoomicon a').length) { var jnzoom = 0; setInterval(function() { var img = $('.zoomicon:eq(' + jnzoom + ') a'); var MediumImageUrl = $(img).find('img').attr('rel'), MainImage = $('.fullimg img'), MainImageIdObject = $('.fullimg input'), GoodsImageIconId = $(img).parent().find('input').attr("rel"); MainImage.attr('src',MediumImageUrl); MainImageIdObject.attr("rel",GoodsImageIconId); jnzoom = $('.zoomicon:eq(' + (jnzoom + 1) + ') a').length ? ++jnzoom : 0; }, 3000); } });
просто добавив его в ваш файл main.js
Все правильно поняли меня. Но изменений нет.
#4
Отправлено 14 Январь 2014 - 15:16
http://bestreg5.ru/i...eplutus-dvr-127
#5
Отправлено 15 Январь 2014 - 00:54
#6
Отправлено 15 Январь 2014 - 07:34
Сake (15 Январь 2014 - 00:54) писал:
Все работает. Я забыл наверно сохранить.
Можно его настроить по скорости смены и заменить эффект появления изображения. Сей час происходит заменяется а хотелось бы чтоб происходило плавное появление (эффект растворения такой же как на стороннем сайте)
#7
Отправлено 16 Январь 2014 - 00:50
MainImage.fadeOut('fast', function() { $(this).attr('src',MediumImageUrl).fadeIn('fast'); });
Для применения данного кода - замените в вставленном коде ранее строку
MainImage.attr('src',MediumImageUrl);
В результате должно получиться
$(function() { if($('.zoomicon a').length) { var jnzoom = 0; setInterval(function() { var img = $('.zoomicon:eq(' + jnzoom + ') a'); var MediumImageUrl = $(img).find('img').attr('rel'), MainImage = $('.fullimg img'), MainImageIdObject = $('.fullimg input'), GoodsImageIconId = $(img).parent().find('input').attr("rel"); MainImage.fadeOut('fast', function() { $(this).attr('src',MediumImageUrl).fadeIn('fast'); }); MainImageIdObject.attr("rel",GoodsImageIconId); jnzoom = $('.zoomicon:eq(' + (jnzoom + 1) + ') a').length ? ++jnzoom : 0; }, 3000); } });
#8
Отправлено 16 Январь 2014 - 10:59
Сake (16 Январь 2014 - 00:50) писал:
MainImage.fadeOut('fast', function() { $(this).attr('src',MediumImageUrl).fadeIn('fast'); });
Для применения данного кода - замените в вставленном коде ранее строку
MainImage.attr('src',MediumImageUrl);
В результате должно получиться
$(function() { if($('.zoomicon a').length) { var jnzoom = 0; setInterval(function() { var img = $('.zoomicon:eq(' + jnzoom + ') a'); var MediumImageUrl = $(img).find('img').attr('rel'), MainImage = $('.fullimg img'), MainImageIdObject = $('.fullimg input'), GoodsImageIconId = $(img).parent().find('input').attr("rel"); MainImage.fadeOut('fast', function() { $(this).attr('src',MediumImageUrl).fadeIn('fast'); }); MainImageIdObject.attr("rel",GoodsImageIconId); jnzoom = $('.zoomicon:eq(' + (jnzoom + 1) + ') a').length ? ++jnzoom : 0; }, 3000); } });
Спасибо получилось как и хотел.
#9
Отправлено 08 Март 2014 - 17:24
#10
Отправлено 09 Март 2014 - 09:35
#11
Отправлено 09 Март 2014 - 14:30
Alexey11 (09 Март 2014 - 09:35) писал:
Думал можно как-нибудь на сайте выставить размеры. Ну буду вручную подгонять, зато 100% гарантия правильного результата. Спасибо
Темы с аналогичным тегами Динамическая, смена, изображения, товара
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных