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

K

Kolfg

Мой дом здесь!
Регистрация
20 Авг 2012
Сообщения
352
Реакции
313
Предлагаю в данной теме выкладывать способы организации эффекта 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 вот отсюда: Для просмотра ссылки Войди или Зарегистрируйся. Среди других понравилось возможностью превью картинок из галереи при наведении на картинку курсора, возможность вывода в лайтбок видео и прочие плюшки, которых нет в других лайтбоксах.

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

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

1. Скачал с архив указанной выше страницы: Для просмотра ссылки Войди или Зарегистрируйся

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, скачанную по ссылке Для просмотра ссылки Войди или Зарегистрируйся и затем переименованную в jquery.js.

Новую версию query.min.js можно отслеживать на сайте Для просмотра ссылки Войди или Зарегистрируйся

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.
 
Последнее редактирование:
Еще один способ организации lightbiox с помощью Highslide JS на Prestashop 1.6.0.9, шаблон - Transformer v3.0.9.

Использую скрипт для увеличения изображения: Highslide JS Для просмотра ссылки Войди или Зарегистрируйся

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

включил теперь в 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', но знаний не хватает, как правильно прописать. Помогите с решением.
 
свободный модуль, но очень хорошо
 

Вложения

  • prestashop_module_elevatezoom_1.0.3.zip
    51,1 KB · Просмотры: 30
cagrie написал(а):
свободный модуль, но очень хорошо
Нажмите для раскрытия...

Спасибо, но мне нужно немножко другое - нужен эффект лайтбокса не для картинок самого товара, добавляемых через соответствующую вкладку карточки. Эффект нужен для картинок, вставляемых в описание товара или в CMS.
 
Kolfg написал(а):
Еще один способ организации lightbiox с помощью Highslide JS на Prestashop 1.6.0.9, шаблон - Transformer v3.0.9.

Использую скрипт для увеличения изображения: Highslide JS Для просмотра ссылки Войди или Зарегистрируйся

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

включил теперь в 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>


При добавлении в CMS(странички)
Код: 
<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>
исчезает
Код: 
onclick="return hs.expand(this)"
Нажмите для раскрытия...
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху