ColorBox - делаем слайдшоу и галереи (продолжение)

Мне очень понравился jQuery плагин ColorBox, и в прошлой статье Модальное окно и скрытый текст с помощью ColorBox я описывал подключение этого плагина в шаблон блога с настройкой показа скрытого на странице текста.
Сегодня рассмотрим главную функцию ColorBox - создание галерей и слайдшоу посредством этого плагина, и конечно все изображения будут динамично отображаться в отдельном окне с эффектами и без, посредине экрана.

Совмещаю для удобства абзацы с демонстрацией и настройкой. Так что если невтерпёж, листайте страницу, щёлкайте ссылки на изображения, а потом возвращайтесь назад.

Традиционно оставлю скриншотное демо картинки, покажу, как она должна "всплыть" ↓

Готовые примеры плагина ColorBox для изображений ↓

Эластичные переходы class="group1":

• Пример 1
• Пример 2
• Пример 3

<a class="group1" href="ссылка_на_изображение" title="описание_изображения">Пример 1</a>

Переходы с затуханием class="group2":

• Пример 1
• Пример 2
• Пример 3

<a class="group2" href="ссылка_на_изображение" title="описание_изображения">Пример 2</a>

Без переходов + фиксированные размеры (75% от размера экрана) class="group3":

• Пример 1
• Пример 2
• Пример 3

<a class="group3" href="ссылка_на_изображение" title="описание_изображения">Пример 3</a>

Слайдшоу - автоматическое листание изображений class="group4":

• Пример 1
• Пример 2
• Пример 3

<a class="group4" href="ссылка_на_изображение" title="описание_изображения">Пример 4</a>

Установка плагина ColorBox ↓
Для того, чтобы установить ColorBox, надо выполнить по очереди первые три шага из моей предыдущей статьи (см ссылку в начале топика):

• подключить jQuery
• подключить ColorBox
• подключить стили

Напомню, что надёжнее будет, если вы задействуете свой внешний хостинг. Ну а для обладателей блога на Wordpress и любого другого standalone блога - это обязательное условие.

Затем для секции head шаблона нужно соорудить скрипт с настройками:

<script>
$(document).ready(function(){
$(".group1").colorbox({rel:'group1', current: "фото {current} из {total}"});
$(".group2").colorbox({rel:'group2', transition:"fade", current: "фото {current} из {total}"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%", current: "фото {current} из {total}"});
$(".group4").colorbox({rel:'group4', slideshowStart: "старт", slideshowStop: "стоп", slideshow:true, current: "фото {current} из {total}"});
});
</script>

В скрипте мы видим настройки для четырёх классов groupe1, groupe2, groupe3, groupe4 из ссылок изображений (см. выше примеры).
Некоторые интересные опции:

• transition - это вид перехода между изображениями. Может быть "elastic", "fade", или "none"
• speed - скорость анимации "elastic" и "fade" в милисекундах
• arrowKey - задействовать стрелки клавиатуры лево-право. Параметр может быть true или false

К каждой groupe (группе) привязаны определённые настройки, которые перечисляются через запятую. Полный перечень можно найти у разработчика (settings) и в самом скрипте.

Ещё один пример, который в силу его специфики, унесён вниз статьи - это показ модального окна при касании мышью ссылки class="group5" (осторожно!!!):

• Пример 1
• Пример 2
• Пример 3

<a class="group5" href="ссылка_на_изображение" title="описание_изображения">Пример 5</a>

Параметр скрипта:

$('.group5').colorbox({rel:'group5', transition:"fade"}).mouseover(function(){ $(this).click();  });

Похожая статья:
PrettyPhoto - мультимедийный плагин для блога.