Подключение галереи jQuery ColorBox

  1. Документация
  2. Раздел для разработчиков
  3. Подключение галереи jQuery ColorBox

Подключение галереи jQuery ColorBox

Возможны два варианта подключения плагтина jQuery ColorBox:

  1. Подключение плагина на странице где не используется панель редактирования администратора
  2. Подключение плагина на странице где используется панель редактирования администратора

Такое разделение обусловлено тем, что использование плагина jQuery ColorBox и панели редактирования администратора на одной и той же странице вызывает конфликт, в результате чего либо не работает плагин, либо не   

работает панель редактирования администратора. 

Подключение плагина на странице где не используется панель редактирования администратора

1. Скачиваем библиотеку jQuery версии jquery-1.7.1.min.js или более новую, если она тестировалась с данным плагином. Информацию о совместимых версиях библиотеки jQuery c плагином jQuery ColorBox можно на сайте плагина.

2. Скачиваем с оффициального сайта плагин jQuery ColorBox. Из архива нам нужно:

  • colorbox/jquery.colorbox.js - сам плагин
  • example1/colorbox.css - файл стилей
  • example1/images - вся папка с картинками оформления

3. Подключаем плагин в шаблоне страницы:

<script type="text/javascript" src="/js/colorbox/jquery-1.7.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="/js/colorbox/colorbox.css">

<script type="text/javascript" src="/js/colorbox/jquery.colorbox-min.js"></script>

Подключение плагина на странице где используется панель редактирования администратора

В данном случае, для предотвращения конфликта будем использовать библиотеку jQuery, которую использует сама UMI-CMS. Для версии плагина  jQuery ColorBox 1.3.20  и версии движка UMI-CMS 2.8.5.3 - библиотека оказалась совместимой. Так как при подключении панели редактирования администратора в коде прописывается <script type="text/javascript" src="/js/jquery/jquery.js?20222" charset="utf-8"></script> - подключать его дополнительно необходимости нет.

1. Скачиваем с оффициального сайта плагин jQuery ColorBox. Из архива нам нужно:

  • colorbox/jquery.colorbox.js - сам плагин
  • example1/colorbox.css - файл стилей
  • example1/images - вся папка с картинками оформления

3. Подключаем плагин в шаблоне страницы (не копировать т.к. в названии макросов использованы русские буквы):

%sуstem includeQuickEditJs()%

%sуstem includeEditInPlaceJs()%
<link rel="stylesheet" type="text/css" href="/js/colorbox/colorbox.css">

<script type="text/javascript" src="/js/colorbox/jquery.colorbox-min.js"></script>

Инициализация плагина jQuery ColorBox

Для быстрого старта достаточно инициализировать используемые группы:

<script>

$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
});
</script>

Дополнительная информация по настройкам плагина тут

Группировка ссылок в группы

Как-то так:

<a class="group1" title="Me and my grandfather on the Ohoopee." href="http://4org.ru/images/web/cl/bg_18.jpg">Grouped Photo 1</a>

<a class="group1" title="Me and my grandfather on the Ohoopee2." href="http://4org.ru/images/web/cl/bg_19.jpg">Grouped Photo 1</a>

Таким образом для подключения плагтина jQuery ColorBox к ссылке на картинку - достаточно лишь указать объявленный при инициализации класс!

Нюанс работы в браузере Internet Explorer

Для корректной работы в браузере Internet Explorer - необходимо что бы первая строка кода страницы содержала <!DOCTYPE html>