Сообщений в теме: 20

[designcomp]

Как сделать чтоб при наведении курсора на картинку, картинка менялась

Прикрепленные изображения

• 

[Vaccina]

Можно это сделать через css и html Пример

<style>
.imgHover:hover {
 background:url('адрес изображения 2');
}
</style>
<div style="height:80px;width:500px;background:url('адрес изображения 1');" class="imgHover">&nbsp;</div>

Данный код вам необходимо подкорректировать под свои требования, и вставить в необходимо место в шаблоне или странице.

[designcomp]

а поподробней можно? магазин designcomp.storeland.ru просто непонятно где адрес второго изображения и куда вставлять

[Vaccina]

background:url('адрес изображения 2');

сюда вставляем ссылку на вторую картинку которая будет отображаться при наведении

[agentteam]

А возможно ли сделать чтобы при наведение на изображение товаров в категории появлялось второе (следующее) фото товара в карточке?

[Ирина345]

agentteam (20 Октябрь 2015 - 11:50) писал:

А возможно ли сделать чтобы при наведение на изображение товаров в категории появлялось второе (следующее) фото товара в карточке?

Здравствуйте, на данный момент у вас отсутствуют товары на сайте, добавьте пожалуйста, а так же другие изображения товара.

[agentteam]

Ирина345 (02 Ноябрь 2015 - 11:56) писал:

Здравствуйте, на данный момент у вас отсутствуют товары на сайте, добавьте пожалуйста, а так же другие изображения товара.

Нет, у вас наверное не та ссылка. Napleche.ru - там есть товары и изображения. Спасибо, что откликнулись.

[Vaccina]

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

<ul class="grid" id="product_list">
				{% FOR goods %}
				  <li class="elem">

после него вставьте:

<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() {
   $('.elem a img').hover(function() {
		  var goods_images_list = $(this).closest('.elem').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 добавьте:

.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;
}
.goods_images_list > div img {
	width: 100%;
	height: auto;
}

[agentteam]

сделал, но 1) доп. изображения показываются пока под основным http://prntscr.com/91lkma
2) первое изображение тоже показывается, т.е. подгружаются не со второго, а с первого.

[Vaccina]

В main.css найдите:

#category_view_type.grid_view #product_list li{display: inline-block; display: -moz-inline-stack; *display: inline;position:relative;width:300px;min-height: 250px;margin:0 2px;padding:0;border:0; vertical-align: top;text-align:center;z-index: 100;
border-radius: 2px; border: 0px solid #F2F2F2;}

замените на:

#category_view_type.grid_view #product_list li{display: inline-block; position:relative;width:300px;min-height: 250px;margin:0 2px;padding:0;border:0; vertical-align: top;text-align:center;z-index: 100;
border-radius: 2px; border: 0px solid #F2F2F2;}

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

.goods_images_list > div {
				display: none;
			  
				position: absolute;
				z-index: 100;
				background: #FFFFFF;
				border: 0px solid #CCCCCC;
				border-radius: 4px;
				left: 0px;
				padding: 0px;
				top: 0px;
				max-height: 250px;
				max-width: 300px;
}
.goods_images_list > div img {
		width: 100%;
		height: auto;
	   
}

замените на:

.goods_images_list > div {
				display: none;
			   right: 0;
			   text-align: center;
				position: absolute;
				z-index: 100;
				background: #FFFFFF;
				border: 0px solid #CCCCCC;
				border-radius: 4px;
				left: 0px;
				padding: 0px;
				top: 0px;
				max-height: 250px;
				max-width: 300px;
}
.goods_images_list > div img {
	width: auto;
	height: 100%;
	max-height: 284px;
}

В main.js найдите:

$(function() {
   $('.elem a img').hover(function() {
				  var goods_images_list = $(this).closest('.elem').find('.goods_images_list');

замените на:

$(function() {
   $('.elem').hover(function() {
				  var goods_images_list = $(this).closest('.elem').find('.goods_images_list');

[agentteam]

Спасибо, уже лучше. Теперь доп. фото сверху показываются.
Но подгрузка доп. фото все равно начинается в большинстве случаев с первой фото (которая выбрана основной). Так что пользователь не видит эффекта смены изображения сначала.

1) Можно ли сделать чтобы со второй фото (не основной) начиналась подгрузка?
2) Можно ли поставить стрелки по бокам влево вправо, чтобы пользователь сам управлял прокруткой?

3) И главное теперь при нажатии на изображение верхнее не работает ссылка на карточку товара.

[Ирина345]

agentteam (12 Ноябрь 2015 - 10:17) писал:

Спасибо, уже лучше. Теперь доп. фото сверху показываются.
Но подгрузка доп. фото все равно начинается в большинстве случаев с первой фото (которая выбрана основной). Так что пользователь не видит эффекта смены изображения сначала.

1) Можно ли сделать чтобы со второй фото (не основной) начиналась подгрузка?
2) Можно ли поставить стрелки по бокам влево вправо, чтобы пользователь сам управлял прокруткой?

3) И главное теперь при нажатии на изображение верхнее не работает ссылка на карточку товара.

Здравствуйте,
1,3  найдите в шаблоне Товары код

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

замените на

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

далее найдите в style.css

.goods_images_list > div img {
		width: auto;
		height: 100%;
		max-height: 284px;
}

замените на

.goods_images_list > div img {
		  max-width: 300px;
	height: 100%;
	max-height: 284px;
}

[agentteam]

Спасибо, получилось отлично! Теперь только 2й пункт со стрелочками остался.

[agentteam]

Оказалось что в хроме и в яндекс браузере доп. изображения отображаются размазанные по ширине. Скриншот http://prntscr.com/92cexf
Подскажите как исправить, сам я не нашел в стилях проблему.

Решил - убрал из этого стиля height:100%; и все ровно стало отображаться.
.goods_images_list > div img {
  max-width: 300px;
height: 100%;
max-height: 284px;
}

[Vaccina]

На счет стрелок, это не карусель, через js идет поочередный вывод картинок и все, в карусели же выводится полный список, ограничивается видимая зона списка и передвигаются по оси x картинки.
Чтобы выводились стрелки придется убрать все изменения и вставлять плагин карусели.

[agentteam]

ок, пока и так хорошо, спасибо за ответ

[agentteam]

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

Дело в том, что сейчас, когда загружаются все, это заметно увеличивает скорость загрузки страниц.

[Vaccina]

В шаблоне Товары попробуйте:

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

заменить на:

{% FOR images %}
										 {% IF goods.images.index = 2 %}
										  <div style="display: none;"><a href="{goods.URL | url_amp}" title="{goods.NAME}" ><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /> </a></div> {% ENDIF %}
										{% ENDFOR %}

[agentteam]

Получилось, спасибо!

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

Я пытаюсь найти способ уменьшения веса страницы. После последнего изменения он уменьшился с 22mb до 11mb в среднем, но это все равно много, на сколько я понимаю.

[Vaccina]

Простите за ожидание, к сожалению, скрытый массив с изображениями подгружается сразу, как вариант вместо large изображений использовать с меньшим размером, medium например.

{% FOR images %}
																				 {% IF goods.images.index = 2 %}
																				  <div style="display: none;"><a href="{goods.URL | url_amp}" title="{goods.NAME}" ><img src="{goods.images.LARGE}" alt="{goods.images.NAME}" /> </a></div> {% ENDIF %}
																				{% ENDFOR %}