Установка lightbox на фотогалерею в UMI.CMS

Дорабатываем стандартный функционал модуля "Фото- и видео-галереи".

Скачаем Lightbox2 (автор Lokesh Dhakar) отсюда. Lokesh Dhakar пишет на своем сайте: "Лайтбокс2 это простой и ненавязчивый скрипт". 🙂 Проверим действительно ли это так.

Яндекс Практикум

Фото: Установка lightbox на фотогалерею в UMI.CMS

Добавим файлы и папки через ftp

/html/templates/название шаблона/js/js-lightbox – в этой папке лежат необходимые скрипты для работы Lightbox2
/html/templates/название шаблона/css/lightbox.css
/html/templates/название шаблона/images/prev.png
/html/templates/название шаблона/images/next.png
/html/templates/название шаблона/images/loading.gif
/html/templates/название шаблона/images/close.png

Вносим изменения в файлы

В <head></head> файла шаблона вставляем строки с 25 по 27.

GeekBrains
<script type="text/javascript" src="{$template-resources}js/js-lightbox/lightbox.js"></script>
<script type="text/javascript" src="{$template-resources}js/js-lightbox/lighbox_prepair.js"></script>

Правим пусть к картинкам в файле /html/templates/название шаблона/js/js-lightbox/lightbox.js, а именно строки

/templates/название шаблона/images/loading.gif
/templates/название шаблона/images/close.png

В файл, отвечающий за вывод фотографий добавляем следующий код:

Фото: Установка lightbox на фотогалерею в UMI.CMS
В нем указываем необходимые нам ширину и высоту.

Nina Nokhrina
Привет! Я — full stack разработчик. Специализируюсь на реализации сложных проектов с использованием фреймворков, а также CMS (Bitrix, WordPress, PrestaShop и Magento). По вопросам разработки пишите сюда. На этом сайте я делюсь своим опытом работы на фриланс-биржах, и публикую статьи на IT-тематику. Я увлекаюсь спортом и считаю, что физическая активность важна для поддержания баланса в жизни разработчика.