jQuery галерея Colorbox

Опубликовано: 1 апреля 2014 г.
  • галерея
  • jquery
  • Пример
  • Скачать
Colorbox - легкий jQuery плагин для увеличения изображений при нажатии, необычайно прост и удобен в использовании, является неплохой альтернативой плагинов Lightbox и Fancybox c возможностью создания галереи и слайдшоу.
jQuery Colorbox

Плагин совместим с jQuery 1.3.2+ в Firefox, Safari, Chrome, Opera, Internet Explorer 7+. Основными достоинствами Colorbox являются:

  • Позволяет показывать картинки, галереи изображений, слайд-шоу, ajax-контент, текстовые данные и iframe содержимое.
  • Маленький размер: 10Kb JavaScript-кода.
  • Внешний вид полностью контролируется с помощью CSS файла, который можно редактировать как вам вздумается
  • Возможно изменить поведение плагина при помощи своего кода, при этом не меняя исходники плагина.
  • Создается W3C валидный XHTML и не применяются глобальные переменные JS.
  • Предзагрузка картинок для оформления и опционально предзагрузка фотографий.
Примеры работы плагина:
1 2 3 4 5
Установкас помощью 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

  • transition
    По умолчанию:
    "elastic"

    Эффект появления. Возможные значения elastic, fade, или none.

  • speed
    По умолчанию:
    350

    Скорость появления в миллисекундах, при эффектах elastic, или fade

  • href
    По умолчанию:
    false

    Может использоваться для определения альтернативного URL для ссылок или других элементов (картинок, кнопок форм). $("h1").colorbox({href:"welcome.html"});

  • title
    По умолчанию:
    false

    Используется для переопределения заголовка. По умолчанию берется значение атрибута title элемента

  • rel
    По умолчанию:
    false

    Используется для создания групп объектов (галереи). Значение также может быть nofollow, чтобы отключить группировку. $("a.gallery").colorbox({rel:"group1"});

  • scalePhotos
    По умолчанию:
    true

    Если включено и заданы параметры maxWidth, maxHeight, innerWidth, innerHeight, width, или height, то плагин будет подгонять изображение под заданный размер

  • scrolling
    По умолчанию:
    true

    При значении false ColorBox скроет данные, выходящие за пределы окна. Этот параметр может использоваться для плавного переключения между данными при использовании метода resize (смотрите ниже), когда необходимо заменить содержимое уже открытого окна

  • opacity
    По умолчанию:
    0.85

    Степень прозрачности перекрывающего слоя. Диапазон: от 0 до 1

  • open
    По умолчанию:
    false

    При значении true ColorBox автоматически откроет окно

  • returnFocus
    По умолчанию:
    true

    Если включено, то при закрытии ColorBox фокус будет возвращен на элемент с которого был вызван плагин

  • trapFocus
    По умолчанию:
    true

    Использование навигации с клавиатуры для вызова плагина

  • fastIframe
    По умолчанию:
    true

    Если false, то событие onComplete будет отложено до тех пор, пока содержимое iframe полностью не загрузится

  • preloading
    По умолчанию:
    true

    Позволяет подгрузить предыдущие и следующие данные по завершению загрузки текущего элемента, если используется группа данных. Используйте false для отключения.

  • overlayClose
    По умолчанию:
    true

    Позволяет закрыть окно ColorBox по клику за его пределами

  • escKey
    По умолчанию:
    true

    Если false, то закрытие при нажатии клавиши Esc запрещено

  • arrowKey
    По умолчанию:
    true

    Разрешает смену изображений объединенных в группу с помощью стрелок влево\вправо на клавиатуре

  • loop
    По умолчанию:
    true

    Если false, то запрещен возврат в начало группы изображений

  • data
    По умолчанию:
    false

    Свойство служит для отправки GET или POST значений с помощью ajax-запроса. Свойство data работает также как и аргумент данных jQuery .load(), т.к. Colorbox использует .load() для обработки ajax.

  • className
    По умолчанию:
    false

    Добавляет заданный класс и оверлей.

  • fadeOut
    По умолчанию:
    300

    Скорость закрытия окна ColorBox в миллисекундах

  • closeButton
    По умолчанию:
    true

    Установите false стобы скрыть кнопку закрытия Colorbox.

Локализация надписей
  • current
    По умолчанию:
    "image {current} of {total}"

    Шаблон вывода номера текущего элемента внутри группы. {current} и {total} определяются и заменяются фактическими номерами во время работы Colorbox

  • previous
    По умолчанию:
    "previous"

    Текст или HTML для кнопки перехода назад при просмотре группы.

  • next
    По умолчанию:
    "next"

    Текст или HTML для кнопки перехода вперед при просмотре группы.

  • close
    По умолчанию:
    "close"

    Текст или HTML для кнопки закрытия окна. Клавиша Esc также закрывает Colorbox

  • xhrError
    По умолчанию:
    "This content failed to load." (Ошибка загрузки содержимого)

    Сообщение об ошибке в случае провала загрузки контента или другого объекта за исключением изображений

  • imgError
    По умолчанию:
    "This image failed to load." (Ошибка загрузки изображения)

    Сообщение об ошибке в случае провала загрузки изображения

Типы контента
  • iframe
    По умолчанию:
    false

    При true данные будут выведены внутри iFrame

  • inline
    По умолчанию:
    false

    При true можно использовать jQuery селекторы или объекты для вывода данных с текущей страницы.

    // используя селектор:
    $("#inline").colorbox({inline:true, href:"#myForm"});
    // С помощью jQuery объекта:
    var $form = $("#myForm");
    $("#inline").colorbox({inline:true, href:$form});
    
  • html
    По умолчанию:
    false

    Позволяет выводить HTML данные или строку: $.colorbox({html:"<p>Hello</p>"});

  • photo
    По умолчанию:
    false

    При true, ColorBox принудительно будет воспринимать выводимые данные данные как изображение. Используйте в случае, если автоопределение фотографий не срабатывает (происходит при использование в качестве пути к картинкам URL вида photo.php вместо photo.jpg)

  • ajax

    Это свойство на самом деле не используется, т.к. Colorbox предполагает, что все href-ы должны обрабатываться либо как ajax или фотографии, если не указаны другие типы содержимого.

Размеры
  • 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
    По умолчанию:
    false

    При true автоматически создает слайд-шоу для группы данных/галереи.

  • 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
    По умолчанию:
    true

    В случае изменения размеров окна браузера происходит перерасчет положения окна ColorBox

Retina изображения
  • retinaImage
    По умолчанию:
    false

    Если true, то ColorBox сожмет текущее изображение чтобы соответствовать pixel ratio экрана

  • retinaUrl
    По умолчанию:
    false

    Если true и устройство имеет дисплей с высоким разрешением, Colorbox произведет замену текущего файла фотографии с расширением retinaSuffix+расширение

  • retinaSuffix
    По умолчанию:
    "@2x.$1"

    Если retinaUrl включено и устройство имеет дисплей с высоким разрешением, то href значение будет иметь расширение объединенное с этим суффиксом. Например, значение my-photo.jpg будет изменено на my-photo@2x.jpg

Функции обратного вызова (Callbacks)
  • onOpen
    По умолчанию:
    false

    Событие, происходящее перед открытием окна ColorBox (используется для вызова Callback функции)

  • onLoad
    По умолчанию:
    false

    Событие, происходящее перед началом загрузки данных

  • onComplete
    По умолчанию:
    false

    Событие, сигнализирующее о том, что данные загружены

  • onCleanup
    По умолчанию:
    false

    Событие, происходящее перед началом закрытия окна

  • onClosed
    По умолчанию:
    false

    Событие, происходящее после завершения закрытия окна

Публичные методы
  • $.colorbox()

    Метод позволяет вызвать ColorBox не используя элементы. $.colorbox({href:"login.php"});

  • $.colorbox.next()
    $.colorbox.prev()

    Методы переключения изображений в группе или слайдов как и при нажатии кнопок вперед/назад

  • $.colorbox.close()

    Этот способ запускает закрытую последовательность, которая не завершается сразу же. lightbox закроется полностью только тогда, когда запускается событие cbox_closed / функция обратного вызова onClosed callback is fired.

  • $.colorbox.element()

    Этот метод используется, чтобы обновить текущий HTML-элемент, с которым связан Colorbox. Возвращает объект, содержащий JQuery элемент. var $element = $.colorbox.element();

  • $.colorbox.resize()

    Метод, производящий перерасчет положения, размеров окна ColorBox. Может быть вызван вручную после того, как содержание ColorBox загружено. Необязательными параметрами объекта могут быть width, или innerWidth и height, или innerHeight. Без указания ширины или высоты, Colorbox будет пытаться пересчитать высоту на основе текущего контента.

  • $.colorbox.remove()

    Удаляет все следы ColorBox из документа. Это не то же самое, что $.colorbox.close(), который прячет ColorBox на случай использования в будущем.

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

Эти события запускаются в тот же самый момент, когда и соответствующие им функции обратного вызова (к примеру, cbox_complete и onComplete), но могут использоваться для создания универсальных изменений в Colorbox, пока функции обратного вызова применяются только к выбранным элементам.

/* Пример использования прослушивателя
   событий и публичного метод для создания 
   примитивного слайд-шоу: */

$(document).bind('cbox_complete', function(){
  setTimeout($.colorbox.next, 1500);
});
  • cbox_open

    Срабатывает, когда Colorbox сначала открыт, но после нескольких объявлений ключевых переменных.

  • cbox_load

    Запускается в начале фазы, когда тип содержимого определен и загружен.

  • cbox_complete

    Запускается когда переход завершен, а новозагруженное содержимое выведено.

  • cbox_cleanup

    Запускается при начале метода close.

  • cbox_closed

    Запускается по завершению метода close.

Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
SPAbootstrapjavascriptjqueryанимацияверсткагалереяграфикакарусельподсказкискроллингсчетчикформыэлементы интерфейса
© 2009-2017 WebSketches.ru