Используем lightbox-клон в теме Котонти Сиена без помощи плагинов

Интеграция jQuery плагина для открытия изображений во всплывающих окнах, например Fancybox, не требует плагина и реализуется через тему Котонти Сиена

Подключаем lightbox клон к CMS Cotonti

Одним из типовых клиентских требований, предъявляемых к локациям сайта, связанных с изображениями (портфолио, галерея и проч.), является интеграция клона популярного в свое время плагина Lightbox. Таких клонов достаточно большое количество, и такое разнообразие может составить сложность в разработке сайта если интеграция реализуется через плагин. Наш способ практически не потребует от разработчика никаких усилий, кроме выполнения несложных манипуляций с темой движка Котонти.

Прежде, чем начать сформулируем недостатки существующего способа, предполагающего использование плагинов, например Fancybox для Котонти Siena:

  1. Привязка осуществляется только по одному селектору
  2. Плагин приходится обновлять в части PHP кода при введении новых возможностей в jQuery код
  3. Проблемы с оптимизацией подключаемых CSS / JS файлов

Подключая jQuery плагин через файл ресурсов темы, вы избегаете всех перечисленных выше недостатков, получая:

  1. возможность использовать любой селектор
  2. легко обновляемый код
  3. подключение через JS/CSS консолидатор

Плюс к этому - полная свобода от разработчика. Итак, как это сделать на примере подключения пакетов Fancybox и PrettyPhoto к стартовой теме Nemesis?

Подключаем Fancybox

Этот jQuery плагин является наиболее распространенным по очевидным причинам: проект живой и постоянно поддерживается. Возможности позволяют управлять показом изображений при помощи колеса прокрутки мыши (через подгрузку миниплагина), режим слайдшоу, показ полноразмерной картинки.

Для установки скачаем дистрибутив из www.github.com/fancyapps/fancyBox и распакуем содержимое каталога source в папку:

themes/nemesis/js/fancybox/

Подключим плагин через файл ресурсов nemesis.rc.php:

cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/js/fancybox/jquery.fancybox.css');
cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/js/fancybox/jquery.fancybox.pack.js');

Проинициализируем плагин через файл themes/nemesis/js/js.js:

$(".fancybox").fancybox();

В качестве примера я использовал класс .fancybox, но вы можете использовать люьое количество любых других селекторов.

Осталось только применить данный класс к необходимому элементу в HTML-коде темы:

<a href="#" title="Lorem Ipsum" class="fancybox"><img src="#" alt="" /></a>

Опции инициализации можно найти здесь: www.fancyapps.com/fancybox/

Подключаем PrettyPhoto

Этот скрипт отличается от Fancybox только внешним видом и небольшим дополнительным функционалом - таким, например, как возможность использования "лайков" в popup-окне.

Установка также не вызывает сложностей: скачиваем дистрибутив с www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ и распаковываем его в папку

themes/nemesis/js/prettyphoto/

Подключим необходимые файлы через файл ресурсов:

cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/js/prettyphoto/css/prettyPhoto.css');
cot_rc_add_file($cfg['themes_dir'].'/'.$usr['theme'].'/js/prettyphoto/js/jquery.prettyPhoto.js');

Проинициализируем плагин для необходимого селектора:

$("a[rel^='prettyPhoto']").prettyPhoto({
    show_title: true,
    social_tools: 0
});

Добавим селектор в необходимый элемент HTML кода (на примере плагина Pagemavatar):

<ul id="listGal">
<!-- BEGIN: PAGEMAVATAR_ROW -->
    <li<!-- IF {PAGE_SLIDER_MAVATARNUM} % 4 == 0 --> class="endItem"<!-- ENDIF -->><a href="{PAGE_SLIDER_MAVATAR}" rel="prettyPhoto[pp_gal]" title="{PAGE_SLIDER_MAVATARDESC}"><img src="datas/galleries/thumb_{PAGE_SLIDER_MAVATARFILE}" alt="" /></a></li>
<!-- END: PAGEMAVATAR_ROW -->
</ul>

Опции инициализации можно найти здесь: www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation/

Подведем итоги: мы получили плагинонезависимые фотогалереи с богатым набором возможностей (модальные окна, popup-картинки, слайд-шоу, "лайки"). Наш способ использует возможности движка по оптимизации загрузки CSS/JS ресурсов и позволяет гибко использовать наши jQuery плагины с любыми элементами в разметке страниц сайта. Обновляются плагины путем простого копирования поверх старых файлов и использования новых опций в селекторах (если таковые появляется в новом релизе).

Удачной вам работы!

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.

К посту «Используем lightbox-клон в теме Котонти Сиена без помощи плагинов» комментариев пока нет

Новый комментарий

Для редактирования комментария осталось 10 минут