Перейти к содержимому


Поочерёдная Смена Изображений При Наведении Курсора На Товар В Каталоге


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 4

#1 Frontliner

Frontliner

    Пользователь

  • Пользователи
  • PipPip
  • 43 сообщений

Отправлено 30 Январь 2019 - 22:34

Здравствуйте! Помогите сделать так, чтобы при нахождении курсора над товаром в каталоге начинали поочерёдно прокручиваться остальные изображения товара. Например, как на сайте Связного https://www.svyaznoy.ru

#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 01 Февраль 2019 - 06:46

Здравствуйте.

Зайдите в раздел Сайт - Редактор шаблонов - Товары - найдите:
				  <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 Frontliner

Frontliner

    Пользователь

  • Пользователи
  • PipPip
  • 43 сообщений

Отправлено 01 Февраль 2019 - 20:59

Просмотр сообщенияVaccina (01 Февраль 2019 - 06:46) писал:

Результат проверьте у товаров в категориях.

Спасибо большое за ответ! Работает отлично, однако если убрать мышь с изображения товара, смена изображений всё равно продолжается. Поэтому если провести мышкой по всем товарам, получается забавная "цветомузыка", когда у всех товаров меняются изображения. Я так понимаю, вторая часть функции hover работает неправильно.

#4 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 02 Февраль 2019 - 07:12

Здравствуйте.

Вы правы, допустила ошибку =) В 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 Frontliner

Frontliner

    Пользователь

  • Пользователи
  • PipPip
  • 43 сообщений

Отправлено 03 Февраль 2019 - 20:17

Просмотр сообщенияVaccina (02 Февраль 2019 - 07:12) писал:

Здравствуйте.

Вы правы, допустила ошибку =) В main.js строку:
								 var goods_images_list = $(this).closest('.elem').find('.goods_images_list');

замените на:
								 var goods_images_list = $(this).closest('.img').find('.goods_images_list');
совсем перестало работать, просто курсор моргает на картинке товара и все. Вторая часть функции работает странно, она постоянно вызывается, когда курсор находится над картинкой. Если поместить туда alert, он постоянно выскакивает.

Поковырялся, рабочий вариант получился вот такой:
$('.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 анонимных