ColorBox – галерея LightBox плагин для jQuery

Плагин ColorBox это аналог галереи lighBox для jQuery. Поддерживает просмотр фото, групп фотографий, слайд-шоу, flash, текстовые данные, ajax данных и содержимого iframe. ColorBox – галерея LightBox плагин для jQuery

ColorBox – галерея LightBox плагин для jQuery

» » Сообщение:

Источник: http://www.jacklmoore.com/colorbox/


Описание

  • Показ картинок, галереи изображений, слайд-шоу, ajax-контент, текстовые данные и iframe содержимое.
  • Маленький размер: меньше 9KB кода JavaScript.
  • Внешний вид полностью контролируется изменением CSS файла.
  • Возможно изменить поведение плагина при помощи своего кода, при этом не меняя исходники плагина.
  • Функционал может быть расширен при помощи callback функций.
  • Не требуется менять исходный код страницы.
  • Предзагрузка картинок для оформления и опционально предзагрузка фотографий.
  • Возможно использование в цепочке jQuery команд.
  • Создается W3C валидный XHTML и не применяются глобальные переменные JS.

Настройка

Методы и события будут полезны разработчикам, которым необходимо изменить функционирование плагина, при этом не меня исходный код

Методы

Код: Выделить всё Развернуть
$.fn.colorbox()

Метод позволяет вызвать ColorBox без привязки к конкретному элементу.
Пример:

Код: Выделить всё Развернуть
$.fn.colorbox({href:’login.php’});
Код: Выделить всё Развернуть
$.fn.colorbox.next() и $.fn.colorbox.prev()

Эти методы переключают на следующий/предыдущий элемент внутри группы (то же самое, что и при нажатии кнопок ‘next’ или ‘previous’).

Код: Выделить всё Развернуть
$.fn.colorbox.close()

Инициализирует закрытие окна. Процесс происходит не мгновенно, после завершения закрытия будет вызвано событие ‘cbox_closed’.

Код: Выделить всё Развернуть
$.fn.colorbox.element()

Этот метод используется для обращения к текущему HTML элементу, для которого вызван ColorBox. Возвращает объект jQuery, содержащий элемент.
Пример:

Код: Выделить всё Развернуть
var $element = $.fn.colorbox.element();
Код: Выделить всё Развернуть
$.fn.colorbox.resize()

Позволяет ColorBox автоматически изменить размер окна при изменение содержимого. Необходимо вызвать вручную при замене содержимого окна. Установите для параметра ‘scrolling’ значение false, чтобы данные были показаны только после завершения анимации изменения размера окна.

Код: Выделить всё Развернуть
$.fn.colorbox.init()

Вызывается при построение DOM структуры документа и инициализирует плагин (добавляет необходимый HTML в DOM структуру, предзагрузка изображений интерфейса, инициализация переменных, …). Если ColorBox будет полностью удален ил DOM, для загрузки новой таблицы стилей например, то потребуется повторная инициализация.

События

Код: Выделить всё Развернуть
‘cbox_open’

происходит при открытие окна ColorBox, после установки значений ряду ключевых переменных.

Код: Выделить всё Развернуть
‘cbox_load’

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

Код: Выделить всё Развернуть
‘cbox_complete’

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

Код: Выделить всё Развернуть
‘cbox_cleanup‘

происходит при вызове метода $.fn.colorbox.close().

Код: Выделить всё Развернуть
‘cbox_closed’

происходит по завершению закрытия окна.

Colorbox FAQ: http://www.jacklmoore.com/colorbox/faq/
Много примеров и готовых решений.

Параметры:

Параметр Значение по умолчанию Описание
transition «elastic» Эффект появления. Возможные значения «elastic», «fade» или «none»
speed 350 Скорость появления в миллисекундах, при эффектах «elastic» или «fade»
href false Может использоваться для определения альтернативного URL для ссылок или других элементов (картинок, кнопок форм)
title false Используется для переопределения заголовка. По умолчанию берется значение атрибута title элемента
rel false Используется для создания групп объектов (галереи). При значение 'nofollow' группировка отменяется
width false Устанавливает значение внешней ширины окна (включая бордюр и кнопки)
height false Устанавливает значение внешней высоты окна (включая бордюр и кнопки)
innerWidth false Альтернатива параметру 'width'. Устанавливает ширину картинки
innerHeight false Альтернатива параметру 'height'. Устанавливает высоту картинки
initialWidth 300 Устанавливает начальную ширину окна до загрузки данных
initialHeight 100 Устанавливает начальную высоту окна до загрузки данных
maxWidth false Максимальная ширина отображения загружаемых данных
maxHeight false Максимальная высота отображения загружаемых данных
scalePhotos true При значение 'true' и установленном параметре maxWidth, maxHeight, innerWidth, innerHeight, width или height, ColorBox произведет масштабирование фото под нужный размер
scrolling true При значение »false' ColorBox скроет данные, выходящие за предел окна. Этот параметр может использоваться для плавного переключения между данными при использовании метода resize  (смотрите ниже), когда необходимо заменить содержимое уже открытого окна
iframe false При 'true' данные будут выведены внутри iFrame
inline false При 'true' можно использовать jQuery селекторы для вывода данных с текущей страницы. Пример: $(«#inline»).colorbox({inline:true, href:»#myForm»});
html false Позволяет выводить HTML данные сразу, не подгружая их.
photo false При 'true',  ColorBox принудительно будет воспринимать выводимые данные данные как изображение. Используйте в случае, если авто определение фотографий не срабатывает  (происходит при использование в качестве пути к картинкам URL вида 'photo.php', 'photo.jpg#1′, 'photo.jpg?pic=1′)
opacity 0.85 Степень прозрачности перекрывающего слоя
open false При значении 'true' ColorBox автоматически откроет окно
preloading true Позволяет подгрузить предыдущие и следующие данные по завершению загрузки текущего элемента, если используется группа данных
overlayClose true Позволяет закрыть окно ColorBox по клику за его пределами
slideshow false При 'true' автоматически создает слайд-шоу для группы данных/галереи
slideshowSpeed 2500 Скорость смены данных для слайд-шоу
slideshowAuto true Автоматически запускает слайд-шоу
slideshowStart «start slideshow» Текст для кнопки запуска слайд-шоу
slideshowStop «stop slideshow» Текст для кнопки остановки слайд-шоу
current «{current} of {total}» Шаблона вывода номера текущего элемента внутри группы
previous «previous» Текст для кнопки перехода назад
next «next» Текст для кнопки перехода вперед
close «close» Текст для кнопки закрытия окна
onOpen false Событие, происходящее перед открытием окна ColorBox (используется для вызова Callback функции)
onLoad false Событие, происходящее перед началом загрузки данных
onComplete false Событие, сигнализирующее о том, что данные загружены
onCleanup false Событие, происходящее перед началом закрытия окна
onClosed false Событие, происходящее после завершения закрытия окна
Property Default Description
transition "elastic" The transition type. Can be set to "elastic", "fade", or "none".
speed 350 Sets the speed of the fade and elastic transitions, in milliseconds.
href false This can be used as an alternative anchor URL or to associate a URL for non-anchor elements such as images or form buttons.

Код: Выделить всё Развернуть
$("h1").colorbox({href:"welcome.html"});
title false This can be used as an anchor title alternative for Colorbox.
rel false This can be used as an anchor rel alternative for Colorbox. This allows the user to group any combination of elements together for a gallery, or to override an existing rel so elements are not grouped together.

Код: Выделить всё Развернуть
$("a.gallery").colorbox({rel:"group1"});

Note: The value can also be set to 'nofollow' to disable grouping.

scalePhotos true If true, and if maxWidth, maxHeight, innerWidth, innerHeight, width, or height have been defined, Colorbox will scale photos to fit within the those values.
scrolling true If false, Colorbox will hide scrollbars for overflowing content. This could be used on conjunction with the resize method (see below) for a smoother transition if you are appending content to an already open instance of Colorbox.
opacity 0.85 The overlay opacity level. Range: 0 to 1.
open false If true, Colorbox will immediately open.
returnFocus true If true, focus will be returned when Colorbox exits to the element it was launched from.
trapFocus true If true, keyboard focus will be limited to Colorbox's navigation and content.
fastIframe true If false, the loading graphic removal and onComplete event will be delayed until iframe's content has completely loaded.
preloading true Allows for preloading of 'Next' and 'Previous' content in a group, after the current content has finished loading. Set to false to disable.
overlayClose true If false, disables closing Colorbox by clicking on the background overlay.
escKey true If false, will disable closing colorbox on 'esc' key press.
arrowKey true If false, will disable the left and right arrow keys from navigating between the items in a group.
loop true If false, will disable the ability to loop back to the beginning of the group when on the last element.
data false For submitting GET or POST values through an ajax request. The data property will act exactly like jQuery's .load() data argument, as Colorbox uses .load() for ajax handling.
className false Adds a given class to colorbox and the overlay.
fadeOut 300 Sets the fadeOut speed, in milliseconds, when closing Colorbox.
closeButton true Set to false to remove the close button.
Internationalization
current "image {current} of {total}" Text or HTML for the group counter while viewing a group. {current} and {total} are detected and replaced with actual numbers while Colorbox runs.
previous "previous" Text or HTML for the previous button while viewing a group.
next "next" Text or HTML for the next button while viewing a group.
close "close" Text or HTML for the close button. The 'esc' key will also close Colorbox.
xhrError "This content failed to load." Error message given when ajax content for a given URL cannot be loaded.
imgError "This image failed to load." Error message given when a link to an image fails to load.
Content Type
iframe false If true, specifies that content should be displayed in an iFrame.
inline false

If true, content from the current document can be displayed by passing the href property a jQuery selector, or jQuery object.

Код: Выделить всё Развернуть
// Using a selector:$("#inline").colorbox({inline:true, href:"#myForm"});// Using a jQuery object:var $form = $("#myForm");$("#inline").colorbox({inline:true, href:$form});
html false For displaying a string of HTML or text:

Код: Выделить всё Развернуть
$.colorbox({html:"<p>Hello</p>"});
photo false If true, this setting forces Colorbox to display a link as a photo. Use this when automatic photo detection fails (such as using a url like 'photo.php' instead of 'photo.jpg')
ajax This property isn't actually used as Colorbox assumes all hrefs should be treated as either ajax or photos, unless one of the other content types were specified.
Dimensions
width false Set a fixed total width. This includes borders and buttons. Example: "100%", "500px", or 500
height false Set a fixed total height. This includes borders and buttons. Example: "100%", "500px", or 500
innerWidth false This is an alternative to 'width' used to set a fixed inner width. This excludes borders and buttons. Example: "50%", "500px", or 500
innerHeight false This is an alternative to 'height' used to set a fixed inner height. This excludes borders and buttons. Example: "50%", "500px", or 500
initialWidth 300 Set the initial width, prior to any content being loaded.
initialHeight 100 Set the initial height, prior to any content being loaded.
maxWidth false Set a maximum width for loaded content. Example: "100%", 500, "500px"
maxHeight false Set a maximum height for loaded content. Example: "100%", 500, "500px"
Slideshow
slideshow false If true, adds an automatic slideshow to a content group / gallery.
slideshowSpeed 2500 Sets the speed of the slideshow, in milliseconds.
slideshowAuto true If true, the slideshow will automatically start to play.
slideshowStart "start slideshow" Text for the slideshow start button.
slideshowStop "stop slideshow" Text for the slideshow stop button
Positioning
fixed false If true, Colorbox will be displayed in a fixed position within the visitor's viewport. This is unlike the default absolute positioning relative to the document.
top false Accepts a pixel or percent value (50, "50px", "10%"). Controls Colorbox's vertical positioning instead of using the default position of being centered in the viewport.
bottom false Accepts a pixel or percent value (50, "50px", "10%"). Controls Colorbox's vertical positioning instead of using the default position of being centered in the viewport.
left false Accepts a pixel or percent value (50, "50px", "10%"). Controls Colorbox's horizontal positioning instead of using the default position of being centered in the viewport.
right false Accepts a pixel or percent value (50, "50px", "10%"). Controls Colorbox's horizontal positioning instead of using the default position of being centered in the viewport.
reposition true Repositions Colorbox if the window's resize event is fired.
Retina Images
retinaImage false If true, Colorbox will scale down the current photo to match the screen's pixel ratio
retinaUrl false If true and the device has a high resolution display, Colorbox will replace the current photo's file extention with the retinaSuffix+extension
retinaSuffix "@2x.$1" If retinaUrl is true and the device has a high resolution display, the href value will have it's extention extended with this suffix. For example, the default value would change

Код: Выделить всё Развернуть
my-photo.jpg

to

Код: Выделить всё Развернуть
my-photo@2x.jpg
Callbacks
onOpen false Callback that fires right before Colorbox begins to open.
onLoad false Callback that fires right before attempting to load the target content.
onComplete false Callback that fires right after loaded content is displayed.
onCleanup false Callback that fires at the start of the close process.
onClosed false Callback that fires once Colorbox is closed.

Re: ColorBox – галерея LightBox плагин для jQuery - Usage

Admin » » Сообщение:

Usage

Colorbox accepts settings from an object of key/value pairs, and can be assigned to any HTML element.

Код: Выделить всё Развернуть
// Format:
$(selector).colorbox({key:value, key:value, key:value});
Код: Выделить всё Развернуть
// Examples:
// Image links displayed as a group
$('a.gallery').colorbox({rel:'gal'});
Код: Выделить всё Развернуть
// [anchor=http://likbezz.ru/viewtopic.php?t=1569|Как вывести форму добавления комментария в AJAX-окне?]Ajax[/anchor]
$('a#login').colorbox();
Код: Выделить всё Развернуть
// Called directly, without assignment to an element:
$.colorbox({href:"thankyou.html"});
Код: Выделить всё Развернуть
// Called directly with HTML
$.colorbox({html:"<h1>Welcome</h1>"});
Код: Выделить всё Развернуть
// Colorbox can accept a function in place of a static value:
$("a.gallery").colorbox({rel: 'gal', title: function(){
  var url = $(this).attr('href');
  return '<a href="' + url + '" target="_blank">Open In New Window</a>';
}});

Re: ColorBox – галерея LightBox плагин для jQuery - Event Ho

Admin » » Сообщение:

Event Hooks

These event hooks fire at the same time as their corresponding callbacks (ie. cbox_complete & onComplete), but can be used to make a universal change to Colorbox, while callbacks are only applied to selected elements.

Код: Выделить всё Развернуть
// Example of using an event listener and public method to build a primitive slideshow:
$(document).bind('cbox_complete', function(){
  setTimeout($.colorbox.next, 1500);
});
cbox_open triggers when Colorbox is first opened, but after a few key variable assignments take place.
cbox_load triggers at the start of the phase where content type is determined and loaded.
cbox_complete triggers when the transition has completed and the newly loaded content has been revealed.
cbox_cleanup triggers as the close method begins.
cbox_closed triggers as the close method ends.




Похожие темыКомментарии ПросмотрыПоследнее сообщение
02230Предпросмотр картинки перед загрузк...
Сообщение от: Admin
1395Re: Вывод повторяющегося контента с...
Сообщение от: Admin
1788jQuery plugin: Tablesorter 2.0 - Fl...
Сообщение от: Admin
2291Re: Конфликт jQuery на uCoz
Сообщение от: Admin
02224Настройка phpBB. Прикручиваем галер...
Сообщение от: Admin