Скрипт для просмотра изображений

Уделите внимание корректному отображению фотографий в вашем магазине. Ведь именно с помощью изображений покупатели изучают ваши товары и делают окончательный выбор: покупать или не покупать. Наш скрипт для просмотра изображений на сайтах поможет вам отображать фотографии корректно.

Предупреждение!

Внесение изменений в шаблон интернет-магазина InSales следует выполнять только при наличии достаточных навыков работы с этой системой. Наша инструкция предоставлена «как есть» и мы не можем нести ответственности за ее неправильное толкование или использование.

Мы оказываем только платную техническую поддержку по данному вопросу и сможем интегрировать код в Ваш магазин только на платной основе

Оформление изображений товара, наверное, одно из самых ответственных мест магазина. Покупателю должно быть максимально удобно рассмотреть товар. Давайте попробуем сделать это максимально лаконично и эффективно.


Приготовления

Для начала посмотрим в карточку товара и увидим там 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>

Теперь ссылки вызывают всплывающее окно, проматывающее изображения. Вот так:


Итог

Отлично, теперь все работает, нажимается и переключается. Вот как выглядит готовый код:

Заключение

Данный мануал для InSales включает в себя только основной код. Разобраться с ним и внедрить его в магазин сможет опытный разработчик. Если Вы не готовы самостоятельно заниматься изменениями шаблонов InSales, а также хотите реализовать другие идеи как по этому модулю, так и в общем по системе InSales, мы будем готовы Вам помочь в рамках платной поддержки.

Закажи установку модуля: Скрипт для просмотра изображений для своего магазина

Установка модуля от разработчиков InsalesThemes!
  • Удобные настройки модуля
  • Пожизненная гарантия на работу
  • Быстро и качественно
Успейте заказать установку модуля по специальной цене. Количество ограничено!
Закрыть

Ваша заявка отправлена!

В ближайшее время Вам на почту придет уведомление, а в течении нескольких часов мы свяжемся с Вами и уточним все детали по работе. Имейте ввиду - мы работает с понедельника по пятницу с 10:00 - до 19:00 по МСК