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

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

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

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

1
 $(selector).colorbox({key:value, key:value, key:value});

Примеры:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Ссылки на изображения, отобразятся в группе
$('a.gallery').colorbox({rel:'gal'});

// Ajax
$('a#login').colorbox();

// Откроет указанную страницу
$.colorbox({href:"thankyou.html"});

// Вывод произвольного html кода
$.colorbox({html:"<h1>Welcome</h1>"});

// Изображения объединенные в группу, значение title будет равно результату произвольной функции пользователя
$("a.gallery").colorbox({
     rel: 'gal',
     title: function(){
          var url = $(this).attr('href');
          return '<a href="' + url + '" target="_blank">Open In New Window</a>';
     }
});

Опции

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.

1
2
3
4
5
6
// используя селектор:
$("#inline").colorbox({inline:true, href:"#myForm"});

// используя jQuery объект:
var $form = $("#myForm");
$("#inline").colorbox({inline:true, href:$form});

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 значение будет иметь расширение объединенное с этим суффиксом. Например, значение

1
my-photo.jpg
будет изменено на
1
my-photo@2x.jpg
.

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

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() — Полностью уничтожает возможность использования плагина на странице.

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

1
2
3
$(document).bind('cbox_complete', function(){
  setTimeout($.colorbox.next, 1500);
});

cbox_open, cbox_load, cbox_complete, cbox_cleanup, cbox_closed

Возможно вас это заинтересует
comments powered by HyperComments