Настраиваемый lightbox плагин ColorBox

В этой статье рассмотрим один из многочисленных lightbox плагинов. Этот плагин легок в установке и настройке, а так же имеет большое количество различный настроек которые мы рассмотрим в этой статье.

Особенности плагина:

– Позволяет открывать в окне изображения, галереи, слайдеры, ajax, форматированный текст, видео и iframe вставки;
– Легкий! всего 10kb JavaScript кода;
– Внешний вид можно полностью переделать через CSS:
– Плагин можно расширить через callback функции;
– Легкая установка не требующая изменений в html коде.

Формат вызова плагина:

Примеры:

Опции

transition – по умолчанию “elastic” – Тип перехода, возможны варианты: “elastic”, “fade”, или “none”.
speed – по умолчанию 350 – Скорость “elastic” или “fade” перехода в миллисекундах.
href – по умолчанию false – Используется для открытия определенной страницы или блока на сайте.
title – по умолчанию false – Альтернативное название для ColorBox.
rel – по умолчанию false – Данное свойство группирует изображения создавая галерею.
scalePhotos – по умолчанию true – если включено и заданы параметры maxWidth, maxHeight, innerWidth, innerHeight, width, или height , то плагин будет подгонять изображение под заданный размер.
scrolling – по умолчанию true – Скрывает или отображает горизонтальный и вертикальный скролл в случае переполнения ColoBox окна.
opacity – по умолчанию 0.85 – Прозрачность затемнения фона.
open – по умолчанию false – Если включено, то немедленно открывает ColorBox.
returnFocus – по умолчанию true – Если включено, то при закрытии ColorBox фокус будет возвращен на элемент с которого был вызван плагин.
trapFocus – по умолчанию true – Использование навигации с клавиатуры для вызова плагина.
fastIframe – по умолчанию true – Если false, то событие onComplete будет отложено до тех пор, пока содержимое iframe полностью не загрузится.
preloading – по умолчанию true – Отображение кнопок ‘Next’ и ‘Previous’ в случае если это группа изображений.
escKey – по умолчанию true – Если false, то запрещает закрытие если нажать клавишу Esc.
arrowKey – по умолчанию true – Разрешает смену изображений объединенных в группу с помощью стрелок на клавиатуре.
loop – по умолчанию true – Если false, то запрещает возврат в начало группы изображений.
data – по умолчанию false – Свойство служит ля отправки GET или POST значений с помощью ajax-запроса.
className – по умолчанию false – Добавляет указанный класс для пользовательской стилизации ColorBox или других возможностей.
fadeOut – по умолчанию 300 – Скорость закрытия окна ColorBox в миллисекундах.
closeButton – по умолчанию true – Если false, то убирает кнопку закрытия ColorBox.

Локализация надписей

current – по умолчанию “image {current} of {total}” – Текст или html код для счетчика при просмотре группы изображений.
previous – по умолчанию “previous” – Текст или html код на кнопке, например на “Предыдущий слайд”.
next – по умолчанию “next” – Текст или html код на кнопке, например на “Следующий слайд”.
close – по умолчанию true – Текст или html код кнопки закрытия, клавиша Esc по прежнему будет работать и приведет к закрытия ColorBox.
xhrError – по умолчанию “This content failed to load.” – Сообщение об ошибке в случае провала загрузки контента или другого объекта за исключением изображений.
imgError – по умолчанию “This image failed to load.” – Сообщение об ошибке в случае провала загрузки изображения.

Типы контента

iframe – по умолчанию false – Если true, загружает то что указанно в iframe блоке.
inline – по умолчанию false – Если true, загружает контент текущего документа указанный через селектор или объект в свойстве href.

html – по умолчанию false – Отображает в ColorBox html код или обычный текст.
photo – по умолчанию false – Отображение содержимого как фотографий.
ajax – Загрузка контента через ajax метод.

Масштабирование окна ColorBox

width – по умолчанию false – Устанавливает фиксированную ширину окна. Включая границы и кнопки. Пример: “100%”, “500px”, или 500.
height – по умолчанию false – Устанавливает фиксированную высоту окна. Включая границы и кнопки. Пример: “100%”, “500px”, или 500.
innerWidth – по умолчанию false – Альтернатива width, устанавливает фиксированную внутреннюю ширину окна. исключая границы и кнопки. Пример: “50%”, “500px”, или 500.
innerHeight – по умолчанию false – Альтернатива height, устанавливает фиксированную внутреннюю высоту окна. исключая границы и кнопки. Пример: “50%”, “500px”, или 500.
initialWidth – по умолчанию 300 – Устанавливает начальную ширину окна пока контент не загрузился.
initialHeight – по умолчанию 100 – Устанавливает начальную высоту окна пока контент не загрузился.
maxWidth – по умолчанию false – Устанавливает максимальную ширину окна для загруженного контента. Пример: “100%”, 500, “500px”.
maxHeight – по умолчанию false – Устанавливает максимальную высоту окна для загруженного контента. Пример: “100%”, 500, “500px”.

Настройки режима Slideshow

slideshow – по умолчанию false – Включает или отключает режим слайд шоу.
slideshowSpeed – по умолчанию 2500 – Скорость смены слайдов в миллисекундах.
slideshowAuto – по умолчанию true – Автоматическое воспроизведение слайдов.
slideshowStart – по умолчанию “start slideshow” – Установка пользовательского текста для кнопки “start slideshow”.
slideshowStop – по умолчанию “stop slideshow” – Установка пользовательского текста для кнопки “stop slideshow”.

Позиционирование

fixed – по умолчанию false – Если true, то окно будет всегда закреплено в зоне видимости экрана.
top – по умолчанию false – Задает положение от верхней границы браузера. Значения принимаются в пикселях или процентах (50, “50px”, “10%”).
bottom – по умолчанию false – Задает положение от нижней границы браузера. Значения принимаются в пикселях или процентах (50, “50px”, “10%”).
left – по умолчанию false – Задает положение от левой границы браузера. Значения принимаются в пикселях или процентах (50, “50px”, “10%”).
right – по умолчанию false – Задает положение от правой границы браузера. Значения принимаются в пикселях или процентах (50, “50px”, “10%”).
reposition – по умолчанию false – В случае изменения размеров окна браузера происходит перерасчет положения окна ColorBox.

Retina изображения

retinaImage – по умолчанию false – Если true, то ColorBox сожмет текущее изображение чтобы соответствовать pixel ratio экрана.
retinaUrl – по умолчанию false – Если true и устройство имеет дисплей с высоким разрешением, Colorbox произведет замену текущего файла фотографии с расширением retinaSuffix+расширение.
retinaSuffix – по умолчанию @2x.$1 – Если retinaUrl включено и устройство имеет дисплей с высоким разрешением, то href значение будет иметь расширение объединенное с этим суффиксом. Например, значение

будет изменено на .

Обратные функции

onOpen – по умолчанию false – Срабатывает непосредственно перед открытием ColorBox.
onLoad – по умолчанию false – Срабатывает непосредственно перед началом загрузки контента.
onComplete – по умолчанию false – Срабатывает когда контент полностью загружен.
onCleanup – по умолчанию false – Срабатывает непосредственно перед закрытием ColorBox.
onClosed – по умолчанию false – Срабатывает когда окно ColorBox закрылось.

Публичные методы

$.colorbox() – Метод позволяет вызвать ColorBox не используя элементы.
$.colorbox.next() и $.colorbox.prev() – Методы переключения изображений в группе или слайдов.
$.colorbox.close() – Метод закрывающий ColorBox окно.
$.colorbox.element() – Этот метод используется, чтобы обновить текущий HTML-элемент, с которым связан Colorbox.
$.colorbox.resize() – Метод производящий перерасчет положения, размеров окна ColorBox.
$.colorbox.remove() – Полностью уничтожает возможность использования плагина на странице.

Обработчики событий

cbox_open, cbox_load, cbox_complete, cbox_cleanup, cbox_closed

comments powered by HyperComments