Как подключить

1) Lightbox использует JS библиотеки Prototype Framework и Scriptaculous.

Необходимо подключить следующие три файла в заголовке страницы:

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

2) Подключить Lightbox CSS файл

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


3) Проверить в CSS ссылки на файлы prev.gif next.gif.

Кроме того, убедитесь, ссылки на файлы loading.gif и close.gif, правильно прописаны в файле lightbox.js.


Как использовать

1) Добавляем rel="lightbox" атрибут тега ссылки (”a”), для активации Lightbox. Пример:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">
<img src=” images/image.jpg”></a>

Опции: используйте атрибут title, если хотите что бы изображение было с подписью.

2) Если у вас есть группа превьюшек, которые необходимо сгруппировать, необходимо дополнительно включить в атрибут

rel - имя группы в квадратных скобках.
Пример:

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