Lightbox для вставляемых в тексты Prestashop картинок

Тема в разделе "PrestaShop", создана пользователем Kolfg, 12 ноя 2014.

Информация :
Хочешь в разделе без проблем общаться - прочти правила, чтобы потом с форумом на время не прощаться. Читать обязательно!
Внимание! Читайте внимательно правила!Предупреждения выдаются без всяких вопросов. Нарушил - получил. Будьте Внимательнее! Постинг нескольких постов подряд приравнивается к НАРУШЕНИЮ! Будьте вежливы и соблюдайте правила ;-)
Модераторы: ZiX
  1. Kolfg

    Kolfg

    Регистр.:
    20 авг 2012
    Сообщения:
    197
    Симпатии:
    102
    Предлагаю в данной теме выкладывать способы организации эффекта lightbox для вставляемых в блоги, CMS и карточки товаров картинок только для Prestashop. А также способы их решения возникающих проблем.

    Пишите при этом используемые версии Prestashop и шаблонов.

    Ниже описываю способ с использованием lightbox prettyPhoto, который я применил для Prestashop 1.6.0.9, шаблон - Transformer v3.0.9. prettyPhoto выбрал потому, что помимо практически всех функций, что есть в других lightbox он один из немногих, если не единственный, в котором есть вот такая функция. Он показывает превью остальных картинок на странице (в галерее) на самом изображении при наведении на него мышки. Остальные lightbox занимают место на экране этими превьюшками под или рядом с просматриваемой картинкой.

    Решил добавить эффект Lightbox-а для картинок, используемых в карточках товаров и CMS.
    Использую для Prestashop 1.6.0.9 PrettyPhoto вот отсюда: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/. Среди других понравилось возможностью превью картинок из галереи при наведении на картинку курсора, возможность вывода в лайтбок видео и прочие плюшки, которых нет в других лайтбоксах.

    Все удалось сделать, но возникла одна проблема, которую прошу помочь решить, т.к. не программер. О проблеме - в конце поста.

    Как прикручивал:

    1. Скачал с архив указанной выше страницы: http://www.no-margin-for-errors.com...ghtbox-clone/prettyPhoto_compressed_3.1.5.zip

    2. Распаковал содержимое в папку \js\jquery\plugins\prettyPhoto\ на сервере с установкой PrestashopPrestashop

    3. Здесь учтите, что у меня шаблон Transformer. Если вы используете другой шаблон, правьте соответствующий файл в папке со своим шаблоном. В файл \themes\transformer\header.tpl добавил следующие строки примерно после 59-й строки {if isset($css_files)}. Добавлять надо в любом случае до закрывающего тега /head:

    Код:
    <!-- Start prettyPhoto HEAD section -->
    <script src="/js/jquery/plugins/prettyPhoto/js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="/js/jquery/plugins/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
    <script src="/js/jquery/plugins/prettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
    $.noConflict();
    jQuery(document).ready(function($) {
    $(document).ready(function(){
                $("a[rel^='prettyPhoto']").prettyPhoto({
                allow_resize: true,
                animation_speed:'normal',
                autoplay_slideshow: false,
                counter_separator_label: '/',
                keyboard_shortcuts: true,
                show_title: true,
                slideshow:3000,
                social_tools: false,
                theme:'light_square',          
            });
        });
    });  
    </script>
    <!-- End prettyPhoto HEAD section -->
    
    В официальной документации немного другой код, но с ним у меня лайтбокс не заработал. Порылся по форумам и получился указанный выше. добавить пришлось в начале следующие две строки для решения каких-то конфликтов (не очень разбираюсь в программировании - взял с форума) :

    Код:
    $.noConflict();
    jQuery(document).ready(function($) {
    
    В скачанном с официального сайта архиве нет файла jquery.js. Переименуйте в него файл jquery-1.6.1.min.js из архива. Это рекомендуется сделать для того, чтобы не править каждый раз код при выходе новой версии jquery.js. Я по рекомендации на одном из форумов использовал не jquery-1.6.1.min.js из архива, а более новую версию jquery.min.js 2.1.1, скачанную по ссылке http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js и затем переименованную в jquery.js.

    Новую версию query.min.js можно отслеживать на сайте https://developers.google.com/speed/libraries/devguide#jquery

    4. Теперь вставляю миниатюру картинки, выделяю ее и вставляю ссылку на большую картинку. В параметрах ссылки на большую картинку надо добавить rel=prettyPhoto[gal1]

    Здесь в квадратных скобках указываете что хотите - я указал gal1. Все картинки с одинаковым значением параметра на странице будут открываться в одном слайдшоу при щелчке на любой миниатюре, где в ссылке есть такой gal1. Если хотите чтобы другие картинки были сгруппированы в другую галерею, вставьте в квадратные скобки, например, gal2 или просто 2, Повторю, это может быть любое удобное для вас значение общее для картинок этой группы.

    Если хотите, чтобы по щелчке на миниатюре открывалась только одна эта картинка, то вставляйте просто: rel=prettyPhoto

    Я лично предпочитаю сразу объединять все картинки на странице в одну группу, а параметр автопроигрывания галереи ставлю в нет, т.е. autoplay_slideshow: false,

    Тогда откроется текущая картинка, и, если хотите, можете в просмотреть сразу остальные увеличенные картинки со страницы тоже.

    Пример кода для двух вставленных мной картинок:

    Код:
    <p>
        <a title="Заголовок картинки 1" rel=prettyPhoto[gal1] href="/img/cms/img1_large.jpg"><img src="/img/cms/iimg1_mini.jpg" alt="Альтернативный текст для миниатюры 1" height="150" width="150" /></a>
    </p>
    <p>
        <a title="Заголовок картинки 2" rel=prettyPhoto[gal1] href="/img/cms/img2_large.jpg"><img src="/img/cms/iimg2_mini.jpg" alt="Альтернативный текст для миниатюры 2" height="150" width="150" /></a>
    </p>
    

    Все работает классно!

    Но вот ПРОБЛЕМА: при наведении мышки на увеличенное изображение мы видим вместо 2-х - четыре мини изображения - повтор двух миниатюр картинок. Соответственно в слайдшоу тоже присутствуют 4 картинки - 2 x 2. Если вставим 3 картинки, то будет уже всего 6 миниатюр и в галерее эти три картинки повторятся дважды.

    Господа программисты, помогите найти причину и устранить этот глюк для случая Prestashop 1.6.0.9.
     
    Последнее редактирование: 12 ноя 2014
  2. Kolfg

    Kolfg

    Регистр.:
    20 авг 2012
    Сообщения:
    197
    Симпатии:
    102
    Еще один способ организации lightbiox с помощью Highslide JS на Prestashop 1.6.0.9, шаблон - Transformer v3.0.9.

    Использую скрипт для увеличения изображения: Highslide JS http://highslide.com/

    Все делаю по документации:

    включил теперь в header.tpl такой код:
    Код:
    <!-- Start Highslide HEAD section -->
    <script type="text/javascript" src="/highslide/highslide.js"></script>
    <link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
    <script type="text/javascript">
         // override Highslide settings here
         // instead of editing the highslide.js file
         hs.graphicsDir = '/highslide/graphics/';
    </script>
    <!-- End Highslide HEAD section -->
    
    А ссылки на картинки должны выглядеть так:

    Код:
    <a href="images/full-image.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="images/thumbnail.jpg" alt="Highslide JS" title="Click to enlarge" height="120" width="107" /></a>

    Все работает. Помогите теперь упростить ввод ссылок. Было бы хорошо сделать, чтобы необходимые атрибуты прописывались автоматом при выборе нужного класса при вставке ссылки на большую картинку.

    Как сделать выпадающий список классов в tinyMCE 4 и вставлять значение class="highslide" с помощью этого списка в настройках ссылки разобрался. Для этого в файл \js\tinymce.inc.js надо вписать:

    Код:
        link_class_list: [
            {title: 'None', value: ''},       
            {title: 'highslide', value: 'highslide'},
        ],
    
    Затем при вставке ссылки большой картинки выбрать класс ссылки highslide.

    Как прописать здесь строку, чтобы при выборе класса highslide в ссылку вставлялся не только класс? А именно:

    Код:
    class="highslide" onclick="return hs.expand(this)"
    Я пробовал менять значения в value: 'highslide', но знаний не хватает, как правильно прописать. Помогите с решением.
     
  3. cagrie

    cagrie Писатель

    Регистр.:
    4 июл 2014
    Сообщения:
    8
    Симпатии:
    19
    свободный модуль, но очень хорошо
     

    Вложения:

  4. Kolfg

    Kolfg

    Регистр.:
    20 авг 2012
    Сообщения:
    197
    Симпатии:
    102
    Спасибо, но мне нужно немножко другое - нужен эффект лайтбокса не для картинок самого товара, добавляемых через соответствующую вкладку карточки. Эффект нужен для картинок, вставляемых в описание товара или в CMS.
     
  5. Gudridge

    Gudridge Постоялец

    Регистр.:
    15 сен 2012
    Сообщения:
    134
    Симпатии:
    10