Автор Тема: Lightbox для картинок в Prestashop 1.6.0.9  (Прочитано 3071 раз)

09 Ноября 2014, 21:07:57
  • Фрилансер
  • *
  • Сообщений: 142
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Решил добавить эффект 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.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. Глюк скорее всего с самим лайтбоксом prettyPhoto, т.к. о такой проблеме пишут на форумах и в случаях с другими движками.



10 Ноября 2014, 10:35:03
Ответ #1
  • Ветеран
  • *****
  • Сообщений: 1207
  • Репутация: +29/-1
  • Сообщество PrestaShop
    • Просмотр профиля
Проблема во множестве js библиотек и плагинов. У вас накладываются старые и новые функции. Если так делать, то лучше использовать общую библиотеку jquery и новые функции подключить в плагинах jquery. Тогда и конфликтов не будет и сайт будет грузиться быстрее.
10 Ноября 2014, 10:39:46
Ответ #2
  • Ветеран
  • *****
  • Сообщений: 1207
  • Репутация: +29/-1
  • Сообщество PrestaShop
    • Просмотр профиля
Под престу есть готвый модуль Lightbox, модуль бесплатный. Скачать можно на форуме оф.сайта в английской ветке.
11 Ноября 2014, 00:01:12
Ответ #3
  • Фрилансер
  • *
  • Сообщений: 142
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Под престу есть готвый модуль Lightbox, модуль бесплатный. Скачать можно на форуме оф.сайта в английской ветке.

Спасибо за ответ! Ничего другого не ставил и не модифицировал в дистрибутиве Prestashop 1.6.0.9. Только разве тему Transformer и плагины для tinyMCE.

Попробую найти модуль, о котором Вы написали - пока офф.форум в дауне.

Проблема во множестве js библиотек и плагинов. У вас накладываются старые и новые функции. Если так делать, то лучше использовать общую библиотеку jquery и новые функции подключить в плагинах jquery. Тогда и конфликтов не будет и сайт будет грузиться быстрее.


Да я встречал упоминание в форумах, что лучше использовать общую библиотеку, но наверно потом возникнут проблемы с обновлениями сайта и переходами на новую версию Prestashop. Т.к. придется всю вручную опять править.
11 Ноября 2014, 00:24:41
Ответ #4
  • Фрилансер
  • *
  • Сообщений: 142
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Под престу есть готовый модуль Lightbox, модуль бесплатный. Скачать можно на форуме оф.сайта в английской ветке.

На форуме, к сожалению, для старых версий Prestashop.

Пытаюсь теперь прикрутить другой скрипт для увеличения изображения: 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', но знаний не хватает, как правильно прописать. Помогите с решением.
15 Ноября 2014, 11:36:21
Ответ #5
  • Фрилансер
  • *
  • Сообщений: 142
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Проблема во множестве js библиотек и плагинов. У вас накладываются старые и новые функции. Если так делать, то лучше использовать общую библиотеку jquery и новые функции подключить в плагинах jquery. Тогда и конфликтов не будет и сайт будет грузиться быстрее.

Вы оказались абсолютно правы. Модуль комментариев Prestashop 1.6.0.9 также подгружает jquery. Из-за него было дублирование изображений. Отключил модуль и все стало нормально. Но что надо сделать, чтобы этот модуль и лайтбоксы использовали общую библиотеку jquery для меня осталось загадкой.
15 Ноября 2014, 11:50:45
Ответ #6
  • Ветеран
  • *****
  • Сообщений: 763
  • Репутация: +6/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Самый лучший вариант, это делать тему с нуля, а не переделывать готовую. Так вы сможете использовать одни версии js библиотек.
15 Ноября 2014, 12:56:00
Ответ #7
  • Ветеран
  • *****
  • Сообщений: 20842
  • Репутация: +25276/-0
  • Prestashop - просто и эффективно
    • Просмотр профиля
Самый лучший вариант, это делать тему с нуля, а не переделывать готовую. Так вы сможете использовать одни версии js библиотек.
Вы правы, это действительно идеальный вариант.
Только шаблоны модулей, которые будут в вашей теме, тоже нужно переделать. А если эти модули используют javacsript, то и сами модули придеться подстраивать. Так что переделки модулей не избежать.
Эксперт Prestashop - решения всех проблем, написание модулей, создание тем для интернет-магазинов под Prestashop.
Эксперт Magento - создам сайт на Magento, программирование кастомных модулей для Magento, кастомизация тем Magento.
Лучшие цены!!!
15 Ноября 2014, 23:01:00
Ответ #8
  • Фрилансер
  • *
  • Сообщений: 142
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Ну слишком уж тяжелый выход из ситуации. Наверно есть смысл написать автору Transformer, чтобы решил этот вопрос в своем шаблоне.