Эффект lightbox2 для изображений в Blogspot

В прошлом посте я рассказывал, как можно вставить изображение на Blogger таким образом, чтобы в посте отображалась небольшое превью, а при клике на нем картинка выводилась в полном размере. Кроме открытия фотографии в новом окне (вкладке) браузера есть возможно выводить ее в так называемом popup (всплывающем) окне.

Год назад или даже более того был создан специальный эффект lightbox для вывода всплывающего окна. Он выглядел просто потрясающе, поэтому быстро обрел популярность. Сейчас существует несколько вариаций и модификаций оригинальной версии, кроме изображений доступен даже вывод видео! Реализовывается все с помощью JavaScript.

Сегодня я хочу рассмотреть вторую версию данного эффекта под названием lightbox2. Вот как выглядит рабочий пример:

Помимо отдельных изображений, можно использовать объединение их в группу с возможностью навигации. Своего рода небольшая галерея.

Кстати, работы, которые вы видите принадлежат лондонскому дизайнеру Питу Харисону (Pete Harrison).

Теперь рассмотрим как же сделать столь эффектное увеличение изображений для блога.

Подключение скрипта

Поскольку у Blogger`а нет непосредственного доступа к хостингу и невозможно разместить на нем свои файлы, вам потребуется использовать подходящий интернет сервис или вас собственный хостинг от другого проекта.

1. Скачиваем архив скрипта, распаковываем и заливаем на хостинг.

2. Добавляем 3 Javascript файла в блок header вашего блога (в таком же порядке!):

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

3. Подключаем дополнительный файл стилей для эффекта (можно добавить их в существующий CSS):

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

4. Посмотрите CSS файл и удостоверьтесь, что пути к файлам prev.gif и next.gif указаны правильно. Я использовал прямой путь чтобы наверняка не возникло никаких ошибок. Точно также проверьте пути к loading.gif и close.gif в файле скрипта lightbox.js.

Активация эффекта

1. Чтобы активировать использование эффекта для конкретного изображения нужно добавить в тег IMG строку rel=»lightbox»:

<a href="http://www.blogger.com/images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Необязательный атрибут title выводит заголовок картинки.

2. Если вы хотите установить эффект для группы изображений, выполняйте те же условия, что и в шаге 1, только добавьте имя группы в квадратных скобках в атрибут rel:

<a href="http://www.blogger.com/images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="http://www.blogger.com/images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="http://www.blogger.com/images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Все, проверяйте, что у вас получилось:)
Кстати, нет никаких ограничений на количество изображений в группе и количество групп на одной странице – используйте сколько хотите.