Решил добавить эффект 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/demos/prettyPhoto-jquery-lightbox-clone/prettyPhoto_compressed_3.1.5.zip2. Распаковал содержимое в папку \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#jquery4. Теперь вставляю миниатюру картинки, выделяю ее и вставляю ссылку на большую картинку. В параметрах ссылки на большую картинку надо добавить 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. Глюк скорее всего с самим лайтбоксом prettyPhoto, т.к. о такой проблеме пишут на форумах и в случаях с другими движками.
