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


Доп Изображения Под Основным В Каталоге

каталог

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

#1 apr1or1

apr1or1

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

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

Отправлено 18 Апрель 2015 - 12:24

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

При наведении на маленькие изображения, должно меняться большое изображение. В ваших шаблонах есть нечто подобное, например, в "Движении", там изображения появляются при наведении на карточку и слева. Так что думаю это реализуемо.


Буду очень благодарен за помощь.

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

  • Screenshot.png


#2 Ирина345

Ирина345

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

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

Отправлено 20 Апрель 2015 - 13:39

Просмотр сообщенияansiel (18 Апрель 2015 - 12:24) писал:

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

При наведении на маленькие изображения, должно меняться большое изображение. В ваших шаблонах есть нечто подобное, например, в "Движении", там изображения появляются при наведении на карточку и слева. Так что думаю это реализуемо.


Буду очень благодарен за помощь.

Здравствуйте, если ваш вопрос еще актуален, то найдите в шаблоне Товары код
    
 </div>
								</figure>
							{% ENDFOR goods %}

перед вставьте
  
  <div class="preview big hidden-tablet hidden-phone">
				<div class="wrapper">
				  <div class="col-1">
					<ul id="thumb_images">
					
					  {% FOR images %}
					  
						<li>
						  <a class="image" data-rel="{goods.images.SMALL}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">
							<img class="thumb" alt="" src="{goods.images.SMALL}">
						  </a>
						</li>
					   
					  {% ENDFOR %}
					
					</ul>
				  </div>   </div>   </div> 

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




/* Блок, появляющийся при наведении на товар в каталоге и капусельках */
.preview {position: absolute !important;z-index: 2000;top: 0;left: -80px !important;display: none;overflow: hidden;float: left;text-align: left;padding: 5px;background-color: #fff;border: solid 1px #ccc;}
.preview .col-1 {width: 75px;}
.preview .col-1 #thumb_images {height: 400px;overflow: hidden;}
.col-1, .col-2, .col-3 {float: left;}
.preview .col-2 {width:{SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM}px;float: right;padding-left: 5px; }   
.preview .col-1 a {height: 75px;position: relative;display: block;text-align: center;margin-bottom: 5px;}
.preview .col-1 img {margin-bottom: 5px;max-height: 100%;}
.preview .big_image {text-align: center;margin: 0 auto;}
.preview img {max-width: 100%;}
.goodsTableTovar:hover div.preview {
  display: block !important;
}
/* END Блок, появляющийся при наведении на товар в каталоге и капусельках */



#3 apr1or1

apr1or1

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

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

Отправлено 20 Апрель 2015 - 20:17

Просмотр сообщенияИрина345 (20 Апрель 2015 - 13:39) писал:

Здравствуйте, если ваш вопрос еще актуален, то найдите в шаблоне Товары код
</div>
</figure>
{% ENDFOR goods %}

перед вставьте
  
<div class="preview big hidden-tablet hidden-phone">
<div class="wrapper">
<div class="col-1">
<ul id="thumb_images">

{% FOR images %}

<li>
<a class="image" data-rel="{goods.images.SMALL}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">
<img class="thumb" alt="" src="{goods.images.SMALL}">
</a>
</li>

{% ENDFOR %}

</ul>
</div> </div> </div> 

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




/* Блок, появляющийся при наведении на товар в каталоге и капусельках */
.preview {position: absolute !important;z-index: 2000;top: 0;left: -80px !important;display: none;overflow: hidden;float: left;text-align: left;padding: 5px;background-color: #fff;border: solid 1px #ccc;}
.preview .col-1 {width: 75px;}
.preview .col-1 #thumb_images {height: 400px;overflow: hidden;}
.col-1, .col-2, .col-3 {float: left;}
.preview .col-2 {width:{SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM}px;float: right;padding-left: 5px; }
.preview .col-1 a {height: 75px;position: relative;display: block;text-align: center;margin-bottom: 5px;}
.preview .col-1 img {margin-bottom: 5px;max-height: 100%;}
.preview .big_image {text-align: center;margin: 0 auto;}
.preview img {max-width: 100%;}
.goodsTableTovar:hover div.preview {
display: block !important;
}
/* END Блок, появляющийся при наведении на товар в каталоге и капусельках */


Да, актуально. Спасибо.
Но всё-таки это не совсем то, о чём я просил. Конечно, этот вариант тоже не плох. Но хотелось бы узнать, возможно ли реализовать то, что я просил?

То есть сделать так, чтобы данные изображения выводились под основным изображением, и при наведении на уменьшенную копию, менялось основное изображение? Таким образом, не уходя со страницы посетитель сможет увидеть все варианты, в приемлимом размере. Причём не только с компьютера, но и с планшета.

Upd.

А так же, у меня почему то не получается поставить ограничение: если картинок меньше 2, то не показывать данный блок.

#4 Vaccina

Vaccina

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

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

Отправлено 24 Апрель 2015 - 02:01

<div class="preview big hidden-tablet hidden-phone">
								<div class="wrapper">
								  <div class="col-1">
										<ul id="thumb_images">
									   
										  {% FOR images %}
										 
												<li>
												  <a class="image" data-rel="{goods.images.SMALL}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">
														<img class="thumb" alt="" src="{goods.images.SMALL}">
												  </a>
												</li>
										  
										  {% ENDFOR %}
									   
										</ul>
								  </div>   </div>   </div>

замените на:
<div class="preview big hidden-tablet hidden-phone" {% FOR images %}{% IF images .length < 2 %}style="display:none;"{% ENDIF %}{% ENDFOR %}>
								<div class="wrapper">
								  <div class="col-1">
										<ul id="thumb_images">
									   
										  {% FOR images %}
										 
												<li>
												  <a class="image" data-rel="{goods.images.SMALL}" href="{goods.URL_MIN_PRICE_NOW | url_amp}">
														<img class="thumb" alt="" src="{goods.images.SMALL}">
												  </a>
												</li>
										  
										  {% ENDFOR %}
									   
										</ul>
								  </div>   </div>   </div>


и поставьте его немного выше, перед:
<div class="goodsTableBottomBlock">


далее стили:
/* Блок, появляющийся при наведении на товар в каталоге и капусельках */
.preview {position: absolute !important;z-index: 2000;top: 0;left: -80px !important;display: none;overflow: hidden;float: left;text-align: left;padding: 5px;background-color: #fff;border: solid 1px #ccc;}
.preview .col-1 {width: 75px;}
.preview .col-1 #thumb_images {height: 400px;overflow: hidden;}
.col-1, .col-2, .col-3 {float: left;}
.preview .col-2 {width:{SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM}px;float: right;padding-left: 5px; }
.preview .col-1 a {height: 75px;position: relative;display: block;text-align: center;margin-bottom: 5px;}
.preview .col-1 img {margin-bottom: 5px;max-height: 100%;}
.preview .big_image {text-align: center;margin: 0 auto;}
.preview img {max-width: 100%;}
.goodsTableTovar:hover div.preview {
display: block !important;
}
/* END Блок, появляющийся при наведении на товар в каталоге и капусельках */

замените на:
/* Блок, появляющийся при наведении на товар в каталоге и капусельках */
.preview {text-align: left;padding: 5px;background-color: #fff;}
.preview .col-1 {width: 100%;}
.preview .col-1 #thumb_images {overflow: hidden;}
.col-1, .col-2, .col-3 {float: left;}
.tovars-block #thumb_images > li {
  display: inline-block;
}
.preview .col-2 {width:{SETTINGS_GOODS_IMAGES_SIZE_CAT_MEDIUM}px;float: right;padding-left: 5px; }
.preview .col-1 a {height: 75px;position: relative;display: block;text-align: center;margin-bottom: 5px;}
.preview .col-1 img {margin-bottom: 5px;max-height: 100%;}
.preview .big_image {text-align: center;margin: 0 auto;}
.preview img {max-width: 100%;}
.goodsTableTovar:hover div.preview {
display: block !important;
}
/* END Блок, появляющийся при наведении на товар в каталоге и капусельках */

после этих действий остается добавить смену картинки при наведении

#5 apr1or1

apr1or1

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

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

Отправлено 24 Апрель 2015 - 22:02

Просмотр сообщенияVaccina (24 Апрель 2015 - 02:01) писал:

{% FOR images %}{% IF images .length < 2 %}style="display:none;"{% ENDIF %}{% ENDFOR %}

Условие не работает. Не проходит компиляцию. Но я пришёл к выводу, что оно и не нужно. Иначе будет всё прыгать по высоте.

Просмотр сообщенияVaccina (24 Апрель 2015 - 02:01) писал:

после этих действий остается добавить смену картинки при наведении

И как это можно сделать?

Сообщение отредактировал ansiel: 25 Апрель 2015 - 07:26


#6 Vaccina

Vaccina

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

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

Отправлено 25 Апрель 2015 - 04:15

{% FOR images %}{% IF images .length < 2 %}style="display:none;"{% ENDIF %}{% ENDFOR %}

ошибка в пробеле, замените его на:
{% FOR images %}{% IF images.length < 2 %}style="display:none;"{% ENDIF %}{% ENDFOR %}

теперь на счет переключения, в конец шаблона  main.js вставьте:
$(function() {
$(document).on('mouseenter', '.goodsTableTovar .preview ul li img.thumb', function() {
  $(this).closest('.goodsTableTovar')
  .find('.goodsTableImg img').attr('src', $(this).attr('src'));
});
});


#7 apr1or1

apr1or1

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

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

Отправлено 25 Апрель 2015 - 07:29

Просмотр сообщенияVaccina (25 Апрель 2015 - 04:15) писал:


теперь на счет переключения, в конец шаблона  main.js вставьте:
$(function() {
$(document).on('mouseenter', '.goodsTableTovar .preview ul li img.thumb', function() {
$(this).closest('.goodsTableTovar')
.find('.goodsTableImg img').attr('src', $(this).attr('src'));
});
});

Это потрясающе!





Темы с аналогичным тегами каталог

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

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