
Оформление изображений товара, наверное, одно из самых ответственных мест магазина. Покупателю должно быть максимально удобно рассмотреть товар. Давайте попробуем сделать это максимально лаконично и эффективно.
Приготовления
Для начала посмотрим в карточку товара и увидим там html код изображений. Он выглядит примерно так:
<div class="grid_5"> <div class="prev_full"> <a href="" > <img class="zoomim" src="" alt="" title=""> </a> </div> <div class="thumbcont"> <div id="thumblist"> {% for image in product.images %} <div class="prev_min"> <a href=''> <img src='' alt="" > </a> </div> {% endfor %} </div> </div> </div>
Основное большое изображение и несколько маленьких. В данный момент это выглядит примерно так:
Не слишком круто. Для начала стоит красиво прибрать маленькие изображения.
Карусель
Скачаем отсюда библиотеку слайдера и подключим на странице. Кроме этого добавим кнопки навигации в html код и немного стилей.
#Подключение карусели <script type="text/javascript" src="{{ 'jquery.carouFredSel-6.2.0-packed.js' | asset_url }}"></script> <script> $('#thumblist').carouFredSel({ prev: '#img_prev', next: '#img_next', auto: false, swipe: { onMouse: true, onTouch: true } }); </script>
#Маленькие изображения <div class="thumbcont"> <a id="img_prev" class="arows" href="#"><span>Prev</span></a> <a id="img_next" class="arows next" href="#"><span>Next</span></a> <div id="thumblist"> {% for image in product.images %} <div class="prev_min"> <a href='' > <img src='' alt="" > </a> </div> {% endfor %} </div>
#Стили .grid_5 { width: 376px; } .arows { display: block; //float: right; height: 13px; padding: 1px; text-align: center; text-decoration: none; width: 7px; position: absolute; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); top: 50%; left: 100%; } .arows.prev { margin: 0; left: 0%; } .arows span { background: url(bg_arows.png) no-repeat -14px -1px; display: block; height: 28px; margin: 0; text-indent: -9999px; width: 7px; } .arows.next span { background: url(bg_arows.png) no-repeat -21px -1px; } .arows:hover span { background: url(bg_arows.png) no-repeat 0 0; } .arows.next:hover span { background: url(bg_arows.png) no-repeat -7px 0; } .thumbcont { position: relative; }
Посмотрим, что получилось:
Уже намного лучше. Картиночки крутятся и можно посмотреть все, но в маленьком размере.
Hover
Теперь нужно сделать так, чтобы при наведении на маленькую картинку она появлялась вместо большой.
#Добавим data-* аттрибуты в html <div class="grid_5"> <div class="prev_full"> <a href="" > <img class="zoomim" src="" alt="" title=""> </a> </div> <div class="thumbcont"> <a id="img_prev" class="arows" href="#"><span>Prev</span></a> <a id="img_next" class="arows next" href="#"><span>Next</span></a> <div id="thumblist"> {% for image in product.images %} <div class="prev_min"> <a href='' data-img=""> <img src='' alt="" > </a> </div> {% endfor %} </div> </div> </div>
#Скрипт переключения картинок. Меняются url ссылок и src картинки $( function(){ var Large = $(".prev_full a"), Thumbs = $(".prev_min a"); Thumbs.hover(function(){ Large.find("img").attr("src",$(this).attr("data-img")); Large.attr("href",$(this).attr("href")); }); });
Отлично, теперь картинки меняются. Однако при нажатии все еще открывает одну картинку на новой станице. Надо что-то сделать.
Shadowbox
В движок Insales встроен просмотрщик изображений Shadowbox, стоит его использовать.
#Скрипт Shadowbox.loadSkin('classic', '/javascripts/shadowbox/skin'); Shadowbox.loadLanguage('', '/javascripts/shadowbox/lang'); Shadowbox.loadPlayer(['img'], '/javascripts/shadowbox/player'); window.onload = Shadowbox.init;
#rel аттрибуты, привязывающие просмотрщик к ссылкам, а также, уберем повторяющееся первое изображение при количестве изображений более 1. <div class="grid_5"> <div class="prev_full"> <a href="" {% if product.images.size > 1 %} onClick="$('.prev_min a[href$=\''+$(this).attr('href')+'\']').click(); return false;" {% else %} rel="shadowbox[images];options={continuous:true};player=img;" {% endif %} > <img class="zoomim" src="" alt="" title=""> </a> </div> <div class="thumbcont"> <a id="img_prev" class="arows" href="#"><span>Prev</span></a> <a id="img_next" class="arows next" href="#"><span>Next</span></a> <div id="thumblist"> {% for image in product.images %} <div class="prev_min"> <a href='' rel="shadowbox[images];options={continuous:true};player=img;" data-img=""> <img src='' alt="" > </a> </div> {% endfor %} </div> </div> </div>
Теперь ссылки вызывают всплывающее окно, проматывающее изображения. Вот так:
Итог
Отлично, теперь все работает, нажимается и переключается. Вот как выглядит готовый код:
