Lightbox JS v2.0

Lightbox JS – простой JS скрипт, отображающий изображения на текущей странице. Легко и быстро настраиваемый и работает во всех современных браузерах.




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

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>

Скачать Lightbox JS

Официальный сайт www.huddletogether.com/projects/lightbox2