Преимущества COLORBOX над LightBox
(авт. LightBox
[архив - lightbox2.51.zip] ):
плагин имеет настройки внешнего вида бокса и эффекта перехода между изображениями,
имеется возможность создания слайдшоу и установки фиксированного размера окна.
Примеры можно взять здесь
| Название параметра | Описание | значение по умолчанию |
|---|---|---|
| transition | Эффект перехода | "elastic", "fade", "none" |
| speed | Скорость перехода в млс | 350 |
| href | Используется для определения альтернативного url | false |
| title | Переопределение заголовка (по умолчанию берется из title) | false |
| rel | Определение групп, nofollow - отменяет группировку | false |
| width | Внешняя ширина окна (+бордюр и навигация) | false |
| height | Внешняя высота окна (+бордюр и навигация) | false |
| innerWidth | Ширина изображения | false |
| innerHeight | Высота изображения | false |
| initialWidth | Начальная ширина окна | 300 |
| initialHeight | Начальная высота окна | 100 |
| maxWidth | Максимальная ширина контента | false |
| maxHeight | Максимальная высота контента | false |
| scalePhotos | Растянет фото до размеров, указанных в параметрах maxWidth, maxheight, innerWidth, innerHeight, width, height | true |
| scrolling | При значении false обрежет "лишний" контент, иначе покажет scrollbar | true |
| iframe | При значении true, контент будет загружен в iframe | false |
| inline | Если стоит true, можно использовать jQuery селекторы для вывода контента с текущей страницы: jQuery("#inline").colorbox({inline:true, href:"#myForm"}); | false |
| html | Можно выводить данные, не подгружая: jQuery.colorbox({html:'<p>Hello</p>'}); | false |
| photo | "заставить" плагин воспринимать все загружаемые данные как изображения (в случаях, если url имеет вид: photo.jpg#1, photo.jpg?pic=1 или photo.php) | false |
| opacity | уровень прозрачности фона | 0.85 |
| open | при значении true, colorBox автоматически откроет окно | false |
| preloading | если используются группы данных, позволяет подгрузить следующие и предыдущие данные | true |
| overlayClose | закрытие окна по клику на оверлее | true |
| returnFocus | при закрытии colorBox вернет фокус на вызвавший элемент | true |
| escKey | разрешает/запрещает закрытие colorBox по клавише esc | true |
| arrowKey | разрешает/запрещает переключение между слайдами стрелками вправо и влево | true |
| loop | круговой просмотр | true |
| slideshow | если установить в true - создаст слайд-шоу для группы | false |
| slideshowSpeed | скорость смены кадров в слайд-шоу | 2500 |
| slideshowAuto | автозапуск слайд-шоу | true |
| current | шаблон вывода счетчика данных в группе | «image {current} of {total}» |
| slideshowStart | текст для кнопки запуска слайд-шоу | «start slideshow» |
| slideshowStop | текст для кнопки остановки слайд-шоу | «stop slideshow» |
| previous | текст для кнопки "назад" | «previous» |
| next | текст для кнопки "вперед" | «next» |
| close | текст для кнопки "закрыть" | «close» |
Так же хотелось бы отметить замечательную возможность использовать callback-функции:
| Название параметра | Описание | значение по умолчанию |
|---|---|---|
| onOpen | Событие перед открытием окна | false |
| onLoad | Событие перед загрузкой данных | false |
| onComplete | Событие после окончания загрузки данных | false |
| onCleanup | Событие перед закрытием окна | false |
| onClosed | Событие после закрытия окна | false |
Инициализация с параметрами, как ни банально, выглядит так:
jQuery(".galleryBlock li a").colorbox({
current: "Фото {current} из {total}", // вместо {current} скрипт подставить номер текущего слайда
// вместо {total} - кол-во слайдов в группе
opacity: 0.40,
rel: true
});
Также есть небольшой перечень методов, которые могут быть полезны в разных условиях:
| Метод | Описание | Пример |
|---|---|---|
| $.colorbox() | Вызовет colorBox без привязки к конкретному элементу. | $.colorbox({href:'login.php'}) |
| $.colorbox.close() | Закрытие окна. Прежде будет вызвано событие cbox_closed | $.colorbox.close() |
| $.colorbox.element() | Вернет jQuery-объект, для которого вызван colorBox | var $element = $.colorbox.element(); |
| $.colorbox.resize() | Вызывается вручную для пересчета размеров содержимого окна | $.colorbox.resize() |
| $.colorbox.next(), $.colorbox.prev() | Принудительная смена слайда | $.colorbox.next(), $.colorbox.prev() |
| $.colorbox.init() | Принудительная инициализация | $.colorbox.init() |
| $.colorbox.remove() | Совсем уберет из документа colorBox | $.colorbox.remove() |
Библиотека JAVASCRIPT 1997 - Дизайн и сопровождение © SE@RCHER