Одним из типовых клиентских требований, предъявляемых к локациям сайта, связанных с изображениями (портфолио, галерея и проч.), является интеграция клона популярного в свое время плагина Lightbox. Таких клонов достаточно большое количество, и такое разнообразие может составить сложность в разработке сайта если интеграция реализуется через плагин. Наш способ практически не потребует от разработчика никаких усилий, кроме выполнения несложных манипуляций с темой движка Котонти.
Прежде, чем начать сформулируем недостатки существующего способа, предполагающего использование плагинов, например Fancybox для Котонти Siena:
- Привязка осуществляется только по одному селектору
- Плагин приходится обновлять в части PHP кода при введении новых возможностей в jQuery код
- Проблемы с оптимизацией подключаемых CSS / JS файлов
Подключая jQuery плагин через файл ресурсов темы, вы избегаете всех перечисленных выше недостатков, получая:
- возможность использовать любой селектор
- легко обновляемый код
- подключение через 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 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.