Colorbox - легкий jQuery плагин для увеличения изображений при нажатии, необычайно прост и удобен в использовании, является неплохой альтернативой плагинов Lightbox и Fancybox c возможностью создания галереи и слайдшоу.
Плагин совместим с jQuery 1.3.2+ в Firefox, Safari, Chrome, Opera, Internet Explorer 7+. Основными достоинствами Colorbox являются:
- Позволяет показывать картинки, галереи изображений, слайд-шоу, ajax-контент, текстовые данные и iframe содержимое.
- Маленький размер: 10Kb JavaScript-кода.
- Внешний вид полностью контролируется с помощью CSS файла, который можно редактировать как вам вздумается
- Возможно изменить поведение плагина при помощи своего кода, при этом не меняя исходники плагина.
- Создается W3C валидный XHTML и не применяются глобальные переменные JS.
- Предзагрузка картинок для оформления и опционально предзагрузка фотографий.
Установкас помощью NPM/Bower
// Установка с помощью NPM
npm install jquery-colorbox
// Установка с помощью Bower
bower install jquery-colorbox
Вот пример HTML5 документа с необходимыми файлами:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="colorbox.css">
</head>
<body>
<a class='gallery' href='image1.jpg'>Фото_1</a>
<a class='gallery' href='image2.jpg'>Фото_2</a>
<a class='gallery' href='image3.jpg'>Фото_3</a>
<script src="jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
</body>
</html>
Давайте воспользуемся ColorBox для отображения ссылок с классом gallery. Мы будем использовать JQuery чтобы найти соответствующие ссылки, а затем применим метод ColorBox:
<script>
jQuery('a.gallery').colorbox();
</script>
Или, с использованием jQuery-метода .ready():
<script>
jQuery(document).ready(function () {
jQuery('a.gallery').colorbox();
});
</script>
Здесь функция JQuery() принимает CSS-селектор a.gallery и ищет требуемые элементы в документе, после чего возвращает найденную коллекцию элементов, к которым мы потом применяем плагин ColorBox путем вызова метода .colorbox().
Наконец, метод .colorbox () принимает объект с дополнительными настройками, которые перезаписывает настройки по умолчанию, отвечающие за поведение ColorBox. Объект с настройками состоит из разделенного запятыми списка: имя: значение в между открытыми и закрытыми фигурными скобками. Пример:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="colorbox.css">
</head>
<body>
<a class='gallery' href='image1.jpg'>Фото_1</a>
<a class='gallery' href='image2.jpg'>Фото_2</a>
<a class='gallery' href='image3.jpg'>Фото_3</a>
<script src="jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('a.gallery').colorbox({opacity:0.5, rel:'group1'});
});
</script>
</body>
</html>
Варианты использования jQuery Colorbox
Colorbox принимает параметры из объекта, состоящего из пары ключ:значение, и может быть назначен на любой HTML элемент. Формат записи:
$(селектор).colorbox({key:value, key:value, key:value});
Например:
// Для сгруппированных изображений
$('a.gallery').colorbox({rel:'gal'});
// Ajax
$('a#login').colorbox();
// Вызывается непосредственно, без присвоения элемента:
$.colorbox({href:"thankyou.html"});
// Вызывается непосредственно с HTML
$.colorbox({html:"<h1>Привет</h1>"});
// Colorbox может принять функцию вместо статического значения:
$("a.gallery").colorbox({rel: 'gal', title: function(){
var url = $(this).attr('href');
return '<a href="' + url + '" target="_blank">Открыть в новом окне</a>';
}});
Если у вас остались какие-либо вопросы по использованию jQuery-плагина Colorbox, или что-то не получается - обратитесь к разделу FAQ, где собраны ответы на наиболее часто задаваемые вопросы.
Настройки Colorbox