0
Сообщений в теме: 6
#1
Отправлено 18 Апрель 2015 - 12:24
Здравствуйте, хотелось бы реализовать для каталога отображение дополнительных изображений товара, сразу под основным изображением. (пример на скриншоте)
При наведении на маленькие изображения, должно меняться большое изображение. В ваших шаблонах есть нечто подобное, например, в "Движении", там изображения появляются при наведении на карточку и слева. Так что думаю это реализуемо.
Буду очень благодарен за помощь.
При наведении на маленькие изображения, должно меняться большое изображение. В ваших шаблонах есть нечто подобное, например, в "Движении", там изображения появляются при наведении на карточку и слева. Так что думаю это реализуемо.
Буду очень благодарен за помощь.
#2
Отправлено 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
Отправлено 20 Апрель 2015 - 20:17
Ирина345 (20 Апрель 2015 - 13:39) писал:
Здравствуйте, если ваш вопрос еще актуален, то найдите в шаблоне Товары код
перед вставьте
далее в конец файла main.css добавьте
</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
Отправлено 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
Отправлено 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
Отправлено 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
Отправлено 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 анонимных