Юзабильный popUp изображений в карточке товара (blueimp Gallery)

Тема в разделе "Инструкции и FAQ", создана пользователем optimlab, 7 июн 2015.

  1. optimlab

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

    Сообщения:
    813
    Симпатии:
    216
    Как вы знаете Opencart 2 сверстан на основе Bootstrap. И не воспользоваться множеством готовых скриптов, коих в интернете можно найти достаточно, было бы глупо.

    У многих пользователей тач-устройств уже сформировалась привычка листать изображения пальцем по экрану. Иногда эта привычку можно заметить, когда просматриваешь фото на фотоаппарате, у которого нет сенсорного экрана. Что уже говорить о телефонах или планшетах...

    Скрипт просмотра изображений Magnific Popup достался Opencart 2 в наследство от предыдущей версии. Он морально устарел и не соответствует современным требованиям привычек пользователей. Поэтому предлагаю вам заменить его на более современный скрипт и одну из лучших галерей на мой взгляд: blueimp Gallery

    1. Скачиваем архив: https://github.com/blueimp/Gallery
    2. По адресу \catalog\view\javascript\jquery\ создаем папку blueimp и копируем туда 3 папки (css, img, js) из архива.
    3. Открываем \catalog\controller\product\product.php

      Ищем 2 строчки:
      PHP:
                  $this->document->addScript('catalog/view/javascript/jquery/magnific/jquery.magnific-popup.min.js');
                  
      $this->document->addStyle('catalog/view/javascript/jquery/magnific/magnific-popup.css');
      и заменяем их на это:
      PHP:
                  $this->document->addScript('catalog/view/javascript/jquery/blueimp/js/blueimp-gallery.min.js');
                  
      $this->document->addStyle('catalog/view/javascript/jquery/blueimp/css/blueimp-gallery.min.css');
    4. Открываем шаблон карточки товара \catalog\view\theme\default\template\product\product.tpl
      Ищем
      Код:
      <ul class="thumbnails">
      и добавляем id чтоб получилось так:
      Код:
      <ul class="thumbnails" id="blueimp">

      Ищем функцию Javascript отвечающую за magnificPopup:
      Код:
      $(document).ready(function() {
          $('.thumbnails').magnificPopup({
              type:'image',
              delegate: 'a',
              gallery: {
                  enabled:true
              }
          });
      });
      так как она нам больше не нужна, заменяем её на функцию blueimp
      Код:
      document.getElementById('blueimp').onclick = function (event) {
          event = event || window.event;
          var target = event.target || event.srcElement,
              link = target.src ? target.parentNode : target,
              options = {index: link, event: event},
              links = this.getElementsByTagName('a');
          blueimp.Gallery(links, options);
      };

      Ищем в самом низу строку:
      PHP:
      <?php echo $footer?>
      Перед ней вставляем код навигации в PopUp:
      HTML:
      <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
          <div class="slides"></div>
          <h3 class="title"></h3>
          <a class="prev">‹</a>
          <a class="next">›</a>
          <a class="close">×</a>
          <a class="play-pause"></a>
          <ol class="indicator"></ol>
      </div>
    В результате чего вы получите стильную PopUp-галерею со всеми плюсами "крос-платформо-устройственной" юзобильности.

    Успехов! ;)
     
    Последнее редактирование: 8 июн 2015
    Deleted member, Bkmz, solunski.d и 4 другим нравится это.
  2. optimlab

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

    Сообщения:
    813
    Симпатии:
    216
    Возможно вы заметите небольшой косяк что при нажатии на поле около изображений открываются фото. Но это не косяк скрипта, а верстки.
    А именно свойства overflow: auto; в классе .thumbnails
    Вам необходимо поиграть с версткой.
     
    Последнее редактирование: 7 июн 2015
    Zlata Jesen нравится это.
  3. optimlab

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

    Сообщения:
    813
    Симпатии:
    216
    Последнее редактирование: 2 дек 2015
  4. Zlata Jesen

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

    Сообщения:
    165
    Симпатии:
    97
    эм... "Запрашиваемая страница не найдена!"... в ссылке ошибка?
     
  5. optimlab

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

    Сообщения:
    813
    Симпатии:
    216
    В какой именно ссылке? Проверил все ссылки, всё открывается.
     
  6. Zlata Jesen

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

    Сообщения:
    165
    Симпатии:
    97
    Странно, сейчас с компа открывается, а в тот раз с ноута пробовала, ошибку выдавало... Глюк, наверное. Ссылку в 3 посте я имела ввиду.
     
  7. DiMoss

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

    Сообщения:
    858
    Симпатии:
    234
    Отличный popup, но столкнулся с такой проблемой - у меня в одном шаблоне в попап окно выводятся несколько изображений. Т.е. не из одного списка! Соответственно задать им один и тот же id я не могу.
    Как то можно это решить?
     
  8. optimlab

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

    Сообщения:
    813
    Симпатии:
    216
    Последнее редактирование: 2 апр 2016
    DiMoss нравится это.
  9. DiMoss

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

    Сообщения:
    858
    Симпатии:
    234
    @XDX , не могу разобраться что сделать со скриптом чтоб работало....

    Например вот для такого шаблона....
    Код:
    <?php if ($thumb) { ?>          
      <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
            
        <div class="mainphoto thumbnails boxshadow">              
          <a class="thumbnail" href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" data-gallery>
            <span class="product-name"><?php echo $model; ?></span>
              <img src="<?php echo $thumb; ?>" alt="<?php echo $heading_title; ?>" />                  
              <?php if ($special) { ?>
                <span class="special-stock"></span>
              <?php } ?>  
            </a>
          </div>
    
          <?php if ($images) { ?>              
            <ul class="thumbnails">          
              <?php if ($images) { ?>
                <?php foreach ($images as $image) { ?>
                  <li class="image-additional">
                    <a class="thumbnail boxshadow" href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" data-gallery><img src="<?php echo $image['thumb']; ?>" alt="<?php echo $heading_title; ?>" /></a>
                </li>
              <?php } ?>
            <?php } ?>
          </ul>
        <?php } ?>
    
      </div>
    <?php } ?>
    
     
  10. optimlab

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

    Сообщения:
    813
    Симпатии:
    216
  11. DiMoss

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

    Сообщения:
    858
    Симпатии:
    234
    Лайт-бокс установлен. Исходя из инструкции по предыдущей ссылке, я понял, что надо прописать для ссылок на фото
    data-gallery. Ещё там написано, что можно убрать из скрипта функцию onclick. И вот я не пойму как теперь должен выглядеть скрипт...
    Код:
    document.getElementById('blueimp').onclick = function (event) {
      event = event || window.event;
      var target = event.target || event.srcElement,
      link = target.src ? target.parentNode : target,
        options = {index: link, event: event},
        links = this.getElementsByTagName('a');
      blueimp.Gallery(links, options);
    };
    
    Или его вообще теперь нужно удалить?
     
  12. LehaLebed

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

    Сообщения:
    91
    Симпатии:
    12
    Можно ли без замены этих строк?
    PHP:
                $this->document->addScript('catalog/view/javascript/jquery/magnific/jquery.magnific-popup.min.js');
               
    $this->document->addStyle('catalog/view/javascript/jquery/magnific/magnific-popup.css');
    и заменяем их на это:
    PHP:
                $this->document->addScript('catalog/view/javascript/jquery/blueimp/js/blueimp-gallery.min.js');
               
    $this->document->addStyle('catalog/view/javascript/jquery/blueimp/css/blueimp-gallery.min.css');
    просто путем добавления?

    у меня просто если я заменяю magnigic на blueimp то перестает работать футер и некоторые модули динамического изменения цены при выборе опции.
    но я если я просто добавляют, то у меня открываются две галереи, и старая и новая. можно как нибудь по другому старую отключить при нажатии на изображение?
     
  13. DiMoss

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

    Сообщения:
    858
    Симпатии:
    234
    А пустой h3 не критичен в плане сео? Валидатор ругается...

    Снимок экрана 2017-08-10 в 11.35.10.png
     
  14. karpov

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

    Сообщения:
    1.271
    Симпатии:
    183
    А если заполнить чем нибудь? точкой например?