Подключение модуля lightbox2 в 2.7.х

Материал из Umicms

Рецепт актуален для версии UMI.CMS до 2.7.4 включительно (т.е. для версий системы, использующих js-фреймворк prototype)
Рецепт перепроверен и сохранил актуальность для версии UMI.CMS до 2.8.1.3 с небольшим ограничением*

Существует бесплатно распространяемый модуль lightbox2, который позволяет создавать красивый эффект при выводе увеличенного изображения в том же окне. Подключается модуль быстро и просто:

1. Скачиваем архив модуля, на текущий момент на сайте производителя можно скачать Lightbox версии 2.04
2. Распределяем файлы архива по директориям системы UMI.CMS. Один из вариантов размещения (файлы - папка размещения):

css стили - /css/

изображения - /images/

js скрипты - /js/js-lightbox/

3. Создаем отдельный шаблон страницы для фотоальбома. Рекомендуется создавать новый шаблон т.к. на загрузку скриптов lightbox требуется время, поэтому нет смысла загружать скрипты для страниц, на которых они не будут использоваться.
4. В шаблоне страницы, в блоке head, подключаем стили и скрипты:

<link type="text/css" rel="stylesheet" href="/css/lightbox.css" media="screen"/>
<script type="text/javascript" src="/js/js-lightbox/prototype.js"></script>
<script type="text/javascript" src="/js/js-lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/js/js-lightbox/lightbox.js"></script>

Необходимо проверить в CSS файле ссылки на файлы prev.gif next.gif, а также ссылки на файлы loading.gif и closelabel.gif в файле lightbox.js. Перед ссылкой на файлы необходимо поставить слэш "/", по умолчанию он отсутствует.

5. В шаблоне, который отвечает за вывод превью изображений на страницу, необходимо активировать использование эффекта lightbox. По умолчанию используется шаблон preview_image.tpl, который находится в папке /tpls/data/ . Способ активации:

<a href="%src%" rel="lightbox[slide]">
%system makeThumbnail(%filepath%, 120, 'auto', 'view')%
</a>

Также важно, чтобы в шаблоне /tpls/photoalbum/default.tpl макрос %data getProperty('%id%', 'photo', 'preview_image')% не был заключен в ссылку, т.е. такого не должно быть:

<a href="%link%">
%data getProperty('%id%', 'photo', 'preview_image')%
</a>

Тэг <a> необходимо убрать.

В итоге, при клике на превью изображение, открывается оригинальное изображение с применением эффекта lightbox. Есть возможно листать изображения, используя всплывающие ссылки Next и Prev. Некоторые из параметров, которые можно настроить:

цвет фона: файл lightbox.css, id #overlay, свойство background-color;

прозрачность фона: файл lightbox.js, свойство overlayOpacity;

вкл. выкл. анимацию: файл lightbox.js, свойство animate;

скорость открытия изображения: файл lightbox.js, свойство resizeSpeed;

Важное замечание, работа модуля lightbox в браузере IE не гарантируется.

*Замечание для версий 2.8.*!!!
Сам плагин использует библиотеку prototype, в то время как для панели редактирования администратора (F2) используется jquery. Эти библиотеки между собой конфликтуют и в результате плагин не работает. Одно из решений описано здесь: http://docs.jquery.com/Using_jQuery_with_Other_Libraries Если же вы не используете панель редактирования и макрос %system includeQuickEditJs()% у Вас в коде шаблонов отсутствует, то проблем быть не должно.