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


Изменение Картинки При Наведении


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

#1 designcomp

designcomp

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

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

Отправлено 04 Февраль 2012 - 11:48

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

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

  • Безымянный.jpg


#2 Vaccina

Vaccina

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

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

Отправлено 05 Февраль 2012 - 00:17

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

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

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

#3 designcomp

designcomp

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

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

Отправлено 05 Февраль 2012 - 13:24

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

#4 Vaccina

Vaccina

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

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

Отправлено 06 Февраль 2012 - 20:27

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

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

#5 agentteam

agentteam

    Продвинутый пользователь

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

Отправлено 20 Октябрь 2015 - 11:50

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

#6 Ирина345

Ирина345

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

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

Отправлено 02 Ноябрь 2015 - 11:56

Просмотр сообщенияagentteam (20 Октябрь 2015 - 11:50) писал:

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

#7 agentteam

agentteam

    Продвинутый пользователь

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

Отправлено 10 Ноябрь 2015 - 14:30

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

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

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

#8 Vaccina

Vaccina

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

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

Отправлено 11 Ноябрь 2015 - 05:25

В шаблоне Товары найдите:
<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;
}


#9 agentteam

agentteam

    Продвинутый пользователь

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

Отправлено 11 Ноябрь 2015 - 19:12

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

#10 Vaccina

Vaccina

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

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

Отправлено 12 Ноябрь 2015 - 02:14

В 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');


#11 agentteam

agentteam

    Продвинутый пользователь

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

Отправлено 12 Ноябрь 2015 - 10:17

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

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

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

#12 Ирина345

Ирина345

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

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

Отправлено 12 Ноябрь 2015 - 12:52

Просмотр сообщения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;
}



#13 agentteam

agentteam

    Продвинутый пользователь

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

Отправлено 12 Ноябрь 2015 - 17:55

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

#14 agentteam

agentteam

    Продвинутый пользователь

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

Отправлено 13 Ноябрь 2015 - 19:37

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

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

#15 Vaccina

Vaccina

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

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

Отправлено 14 Ноябрь 2015 - 03:20

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

#16 agentteam

agentteam

    Продвинутый пользователь

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

Отправлено 14 Ноябрь 2015 - 22:06

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

#17 agentteam

agentteam

    Продвинутый пользователь

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

Отправлено 27 Ноябрь 2015 - 14:21

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

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

#18 Vaccina

Vaccina

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

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

Отправлено 03 Декабрь 2015 - 04:48

В шаблоне Товары попробуйте:
{% 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 %}


#19 agentteam

agentteam

    Продвинутый пользователь

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

Отправлено 04 Декабрь 2015 - 14:15

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

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

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

#20 Vaccina

Vaccina

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

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

Отправлено 25 Декабрь 2015 - 01:11

Простите за ожидание, к сожалению, скрытый массив с изображениями подгружается сразу, как вариант вместо 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 %}





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

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