Здравствуйте! Помогите сделать так, чтобы при нахождении курсора над товаром в каталоге начинали поочерёдно прокручиваться остальные изображения товара. Например, как на сайте Связного https://www.svyaznoy.ru
0
Поочерёдная Смена Изображений При Наведении Курсора На Товар В Каталоге
Автор Frontliner, 30 янв. 2019 22:34
Сообщений в теме: 4
#1
Отправлено 30 Январь 2019 - 22:34
#2
Отправлено 01 Февраль 2019 - 06:46
Здравствуйте.
Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
перед ним вставьте:
далее зайдите в main.js - в самом конце вставьте:
далее зайдите в main.css - найдите:
после него вставьте:
Результат проверьте у товаров в категориях.
Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
<a href="{goods.URL}" title="{goods.DESCRIPTION_SHORT}"> <img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" onmouseover="makeUnderline('{goods.ID}')" onmouseout="makeRegular('{goods.ID}')"/> </a>
перед ним вставьте:
<div class="goods_images_list"> {% FOR images %} <div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div> {% ENDFOR %} </div>
далее зайдите в main.js - в самом конце вставьте:
$(function() { $('.tabproduct a img').hover(function() { var goods_images_list = $(this).closest('.img').find('.goods_images_list'); var size = goods_images_list.find('img').size(); if(size) { goods_images_list.find('div:eq(0)').show(); if(size > 1) { goods_images_list.data('interval', setInterval($.proxy(function() { var next = $(this).find('div:visible').next(); if(!next.length) { next = $(this).find('div:eq(0)'); } $(this).find('div').hide(); next.show(); }, goods_images_list), 3000)); } } }, function() { var goods_images_list = $(this).closest('.elem').find('.goods_images_list'); goods_images_list.find('div').hide(); if(goods_images_list.data('interval')) { clearInterval(goods_images_list.data('interval')); goods_images_list.removeData('interval'); } }); });
далее зайдите в main.css - найдите:
#content .box .tabproduct .img img { max-width:100%; max-height:100%; z-index:30; vertical-align: middle; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px;} #content .box .tabproduct .img img:hover { opacity: 0.9;}
после него вставьте:
.goods_images_list { position: relative; } .goods_images_list > div { display: none; position: absolute; z-index: 100; background: #FFFFFF; left: 0; padding: 2px; top: 0; height: 182px; width: 243px; } .goods_images_list > div img { width: auto; height: auto; }
Результат проверьте у товаров в категориях.
#3
Отправлено 01 Февраль 2019 - 20:59
Vaccina (01 Февраль 2019 - 06:46) писал:
Результат проверьте у товаров в категориях.
Спасибо большое за ответ! Работает отлично, однако если убрать мышь с изображения товара, смена изображений всё равно продолжается. Поэтому если провести мышкой по всем товарам, получается забавная "цветомузыка", когда у всех товаров меняются изображения. Я так понимаю, вторая часть функции hover работает неправильно.
#4
Отправлено 02 Февраль 2019 - 07:12
Здравствуйте.
Вы правы, допустила ошибку =) В main.js строку:
замените на:
Вы правы, допустила ошибку =) В main.js строку:
var goods_images_list = $(this).closest('.elem').find('.goods_images_list');
замените на:
var goods_images_list = $(this).closest('.img').find('.goods_images_list');
#5
Отправлено 03 Февраль 2019 - 20:17
Vaccina (02 Февраль 2019 - 07:12) писал:
Здравствуйте.
Вы правы, допустила ошибку =) В main.js строку:
замените на:
Вы правы, допустила ошибку =) В main.js строку:
var goods_images_list = $(this).closest('.elem').find('.goods_images_list');
замените на:
var goods_images_list = $(this).closest('.img').find('.goods_images_list');
Поковырялся, рабочий вариант получился вот такой:
$('.tabproduct').hover(function() { var goods_images_list = $(this).find('.goods_images_list'); var size = goods_images_list.find('img').size(); if(size) { goods_images_list.find('div:eq(0)').show(); if(size > 1) { goods_images_list.data('interval', setInterval($.proxy(function() { var next = $(this).find('div:visible').next(); if(!next.length) { next = $(this).find('div:eq(0)'); } $(this).find('div').hide(); next.show(); }, goods_images_list), 1500)); } } }, function() { var goods_images_list = $(this).find('.goods_images_list'); goods_images_list.find('div').hide(); if(goods_images_list.data('interval')) { clearInterval(goods_images_list.data('interval')); goods_images_list.removeData('interval'); } });
Правда, сменяемые изображения рисуются поверх селектора модификации (они и в первой версии функции так рисовались). Попробую это исправить.
Всё, исправил z-index в css со 100 на 10, стало норм.
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных