Lightbox2 - создаем галерею.

15.08.2008 10:05

Для тех кто не знает что такое LightBox и для чего он нужен я поясню, Lightbox – простой JS скрипт, который позволяет создавать некое подобие галереи. На страницу можно поместить уменьшенное изображение, нажав на которое открывается красивое окошко, где это изображение будет показано в оригинальном размере, самое важное, что это окошко открывается без перезагрузки страницы и работает почти во всех современных браузерах.

Теперь попробуем разобраться как добавить LightBox на страницу.

1. Установка LightBox:

Lightbox использует JavaScript-библиотеки Prototype Framework и Scriptaculous, эти скрипты необходимо подключить к Вашей странице, для этого вставьте следующий код между тэгами <head> и </head>.

<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. Затем нужно подключить CSS файл, который будет использовать LightBox, для этого вставьте на страницу следующий код (между тэгами <head>)

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

3. Также не забудьте проверить в файле CSS ссылки на prev.gif next.gif. и убедитесь в правильности ссылок на loading.gif и close.gif, в файле lightbox.js.

4. Использование LightBox:

а. Вставляем ссылку ссылку в тело документа, затем ссылке добавляем атрибут rel="lightbox".
Например:

<a href="images/image-1.jpg" rel="lightbox" title="Название"><img src=” images/image.jpg”></a>

Атрибут title необходим для добавления подписи к картинки.

б. Если Вы хотите сгруппировать несколько превьюшек, например, по определенной тематике, то нужно дополнительно включить в атрибут 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 2

С оригиналом статьи на английском языке можно ознакомится здесь