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


Увеличение Фото В Каталоге При Наведении


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

#1 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 07 Август 2013 - 08:20

Как сделать, чтобы все фото при наведении на товар появлялись и чередовались, как на этом сайте? А если 1 фото, то просто чтоб увеличивалось.

#2 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 08 Август 2013 - 03:40

Вы хотите в каталоге при наведении на изображение товара - чтобы всплывало увеличенное изображение товара, и оно чередовалась, если есть более одного изображения. Верно я вас понимаю?

#3 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 08 Август 2013 - 07:53

Да.

#4 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 09 Август 2013 - 03:09

В шаблоне "Товары" найдите

</figure>
<h3><a href="{goods.URL | url_amp}" title="{goods.NAME}">{goods.NAME}</a></h3>

и замените на

</figure>
<div class="goods_images_list">
{% FOR images %}
  <div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div>
{% ENDFOR %}
</div>
<h3><a href="{goods.URL | url_amp}" title="{goods.NAME}">{goods.NAME}</a></h3>

далее найдите

{% ENDIF %}														
<div class="rating">

и замените на

{% ENDIF %}	 
<div class="goods_images_list">
{% FOR images %}
  <div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div>
{% ENDFOR %}
</div>												  
<div class="rating">

в файл стилей style.css добавьте

.goods_images_list {
	position: relative;
}
	 
.goods_images_list > div {
	display: none;
	position: absolute;
	z-index: 100;
	background: #FFFFFF;
	border: 3px solid #CCCCCC;
	border-radius: 4px;
	left: 80px;
	padding: 2px;
	top: 40px;
	max-height: 450px;
	max-width: 450px;
}

в файл main.js добавьте

$(function() {
   $('.items a img').hover(function() {
	  var goods_images_list = $(this).closest('.items').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('.items').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');
	  }
   });
});


#5 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 09 Август 2013 - 08:29

Если случайно навести мышкой на фото, курсор и само фото начинает мигать. И где выбрать размер фото, и интервал переключения? И как убрать всплывающую надпись при наведении на товар?

Еще, если на опустить страницу в самый низ, начинается загрузка других товаров, и на них всплывающие фото не отображаются.

#6 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 10 Август 2013 - 03:03

Найдите в вашем файле стилей style.css

.containers .items, .containers2 .items {
	display: inline-block;
	float: none !important;
	height: 440px;
	overflow: hidden;
	vertical-align: top;
	width: 170px !important;
}

и замените на

.containers .items, .containers2 .items {
	display: inline-block;
	float: none !important;
	height: 440px;
	vertical-align: top;
	width: 170px !important;
}

для реализации задержки и применения для подгружаемых товаров - используйте код вместо предыдущего

$(function() {
   $('.items a img').live({
		mouseenter: function () {
			$(this).data('hover');
			setTimeout($.proxy(function() {
				var goods_images_list = $(this).closest('.items').find('.goods_images_list');
				var size = goods_images_list.find('img').size();
				if(size && $(this).data('hover')) {
					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));
					}
				}
			}, this), 2000);
		},
  mouseleave: function () {
	  var goods_images_list = $(this).closest('.items').find('.goods_images_list');
			goods_images_list.find('div').hide();
			$(this).removeData('hover');
			if(goods_images_list.data('interval')) {
				clearInterval(goods_images_list.data('interval'));
				goods_images_list.removeData('interval');
			}
  }
   });
});

интервал переключения изображений задается числом 3000 - равным 3м секундам. Размер фото ограничен в файле стилей

.goods_images_list > div {
		display: none;
		position: absolute;
		z-index: 100;
		background: #FFFFFF;
		border: 3px solid #CCCCCC;
		border-radius: 4px;
		left: 80px;
		padding: 2px;
		top: 40px;
		max-height: 450px;
		max-width: 450px;
}

свойствами max-height и max-width

Цитата

И как убрать всплывающую надпись при наведении на товар?

Если вы имеете в виду тайтл, с названием товара, то добавьте в main.js

$(function() {
   $('.items a img').each(function() {
		$(this).parent().removeAttr('title');
   });
});


#7 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 10 Август 2013 - 08:07

Фото товаров, которые подгружаются в конце страницы, так и не высвечиваются, и там не убрался тайтл.
И что делать с миганием всплывающего фото при наведении на него курсора?
И как тайтлы на главной в карусели тоже убрать?

#8 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 10 Август 2013 - 08:33

Просмотр сообщенияBrend7111 (10 Август 2013 - 08:07) писал:

Фото товаров, которые подгружаются в конце страницы, так и не высвечиваются, и там не убрался тайтл.
И что делать с миганием всплывающего фото при наведении на него курсора?
И как тайтлы на главной в карусели тоже убрать?

Вы хотите убрать названия товаров из карусели?
Тогда так - добавьте в конец файла style.css код -
.mycarousel h3{display:none;}


#9 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 10 Август 2013 - 08:36

Просмотр сообщенияmiyako (10 Август 2013 - 08:33) писал:

добавьте в конец файла style.css код -
.mycarousel h3{display:none;}
Нет, не названия, а всплывающую надпись с названием товара.

#10 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 10 Август 2013 - 08:46

Просмотр сообщенияBrend7111 (10 Август 2013 - 08:36) писал:

Нет, не названия, а всплывающую надпись с названием товара.

Добавьте в конец main.js код -
$(function() {
   $('.mycarousel li a img').each(function() {
				$(this).parent().removeAttr('title');
   });
});


#11 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 10 Август 2013 - 08:55

Спасибо, у меня осталось всего три вопроса:

1. Всплывающие фото товаров, которые подгружаются в конце страницы, так и не высвечиваются, и вот это там не работает тоже:
$(function() {
$('.items a img').each(function() {
			 $(this).parent().removeAttr('title');
});
});

2. Что делать с миганием всплывающего фото при наведении на него курсора? Попробуйте навести на фото любого товара в каталоге в правом нижнем углу.
3. И как убрать всплывающие названия у сопуток и недавно просмотренных?

#12 miyako

miyako

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

  • Модератоpы
  • 5 372 сообщений

Отправлено 10 Август 2013 - 10:20

Просмотр сообщенияBrend7111 (10 Август 2013 - 08:55) писал:

Спасибо, у меня осталось всего три вопроса:

1. Всплывающие фото товаров, которые подгружаются в конце страницы, так и не высвечиваются, и вот это там не работает тоже:
$(function() {
$('.items a img').each(function() {
			 $(this).parent().removeAttr('title');
});
});

2. Что делать с миганием всплывающего фото при наведении на него курсора? Попробуйте навести на фото любого товара в каталоге в правом нижнем углу.
3. И как убрать всплывающие названия у сопуток и недавно просмотренных?

3) Добавьте в конец main.js код -
$(function() {
$('.mycarousel2 li a img').each(function() {
							 $(this).parent().removeAttr('title');
});
});

1)
Код -
$(function() {
$('.items a img').each(function() {
						 $(this).parent().removeAttr('title');
});
});
работает например в каталоге, поэтому убирать его не нужно

Не очень понятно - Всплывающие фото товаров, которые подгружаются в конце страницы, так и не высвечиваются
По скольку не нашла товара в каталоге, у которого фото бы не высвечивалось. Объясните пожалуйста подробнее или может быть скинете пример?

#13 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 10 Август 2013 - 10:34

Когда захожу в категорию, например, вибраторы, опускаю в самый низ, начинается загрузка товаров с как бы второй страницы, их всего 3 штуки:

2013-08-10 15.24.07.jpg

Как раз у них высвечиваются всплывающие названия, и не высвечиваются увеличенные фото:

2013-08-10 15.24.18.jpg

#14 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 12 Август 2013 - 16:36

Так что, есть какие-нибудь решение проблемы? И мигание всплывающего фото тоже не дает мне покоя, может его просто переместить наверх, чтобы навести на него курсор не получалось?

#15 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 13 Август 2013 - 02:09

Просмотр сообщенияBrend7111 (10 Август 2013 - 08:07) писал:

Фото товаров, которые подгружаются в конце страницы, так и не высвечиваются, и там не убрался тайтл.
И что делать с миганием всплывающего фото при наведении на него курсора?
И как тайтлы на главной в карусели тоже убрать?

У вас отсутствуют изменения из сообщения http://forum.storela...нии/#entry83521

Пожалуйста, примените данные изменения, и очистите кэш в вашем браузере.

#16 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 13 Август 2013 - 03:23

После данных изменений вообще перестало всплывать фото и опять начали отображаться всплывающие надписи.

#17 Сake

Сake

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

  • Модератоpы
  • 5 979 сообщений

Отправлено 13 Август 2013 - 06:08

Найдите в добавленном блоке кода строку

$(this).data('hover');

и замените её на

$(this).data('hover', true).parent().removeAttr('title');


#18 Brendi

Brendi

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

  • Пользователи
  • PipPipPipPip
  • 719 сообщений
  • ГородНорильск

Отправлено 13 Август 2013 - 06:36

Спасибо большое, теперь все работает!

#19 sotil

sotil

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

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 22 Август 2013 - 11:57

Просмотр сообщенияСake (09 Август 2013 - 03:09) писал:

В шаблоне "Товары" найдите

</figure>
<h3><a href="{goods.URL | url_amp}" title="{goods.NAME}">{goods.NAME}</a></h3>

и замените на

</figure>
<div class="goods_images_list">
{% FOR images %}
<div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div>
{% ENDFOR %}
</div>
<h3><a href="{goods.URL | url_amp}" title="{goods.NAME}">{goods.NAME}</a></h3>

далее найдите

{% ENDIF %}														
<div class="rating">

и замените на

{% ENDIF %}	
<div class="goods_images_list">
{% FOR images %}
<div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div>
{% ENDFOR %}
</div>												
<div class="rating">

в файл стилей style.css добавьте

.goods_images_list {
position: relative;
}
	
.goods_images_list > div {
display: none;
position: absolute;
z-index: 100;
background: #FFFFFF;
border: 3px solid #CCCCCC;
border-radius: 4px;
left: 80px;
padding: 2px;
top: 40px;
max-height: 450px;
max-width: 450px;
}

в файл main.js добавьте

$(function() {
$('.items a img').hover(function() {
	 var goods_images_list = $(this).closest('.items').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('.items').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');
	 }
});
});
Здравствуйте подскажите как для сияния сделать анлогично?
спасибо!

#20 Taisia

Taisia

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

  • Модератоpы
  • 1 289 сообщений

Отправлено 22 Август 2013 - 18:11

в шаблоне сияние для списка товаров в категориях

прежде чем производить какие либо изменения сделайте бэкап вашего сайта

далее в админке магазина во вкладке сайт - редактор шаблонов найдите файл ТОВАРЫ

в файле найдите код

<div class="listing prod-inp{goods.ID}" style="margin-bottom: 10px;">

<div class="imagem"><a href="{goods.URL}" title="Перейти на страницу &laquo;{goods.NAME}&raquo;"><img class="goods-image-small" {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a></div>

и добавьте после него код

<div class="goods_images_list">
{% FOR images %}
<div style="display: none;"><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /></div>
{% ENDFOR %}
</div>

далее там же найдите код

<div class="listing prod-inp{goods.ID}" style="margin-bottom: 10px;">
																																		 <div class="imagem">

и замените на код
<div class="listing prod-inp{goods.ID}" style="margin-bottom: 10px;">
																															 <div class="slid">
																																 <div class="imagem">

далее найдите код

</form>																															 </div>
																																 <div class="clr"></div>

и замените на код

</form>																															 </div> </div>
																																 <div class="clr"></div>

далее в файле main.css в конец файла добавьте код

.goods_images_list {
	 position: relative;
}
		
.goods_images_list > div {
			 display: none;
			 position: absolute;
			 z-index: 100;
			 background: #FFFFFF;
			 border: 3px solid #CCCCCC;
			 border-radius: 4px;
			 left: 118px;
			 padding: 2px;
			 top: 11px;
			 max-height: 359px;
			 max-width: 512px;
}
.goods_images_list img {width:350px;}



далее в файле main.js добавьте код


$(function() {
$('.imagem a img').hover(function() {
var goods_images_list = $(this).closest('.slid').find('.goods_images_list');
var size = goods_images_list.find('img').size();
console.log(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('.slid').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');
}
});
});





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных