Lightbox2 галерея на javascript от Lokesh Dhakar

Lightbox2 - легкий в установке и гибкий в использовании скрипт галереи.

Шаг 1 - Установка

1. Lightbox 2 использует Prototype Framework и библиотек Scriptaculous Effects. Вам нужно подключить 3 скрипта (в следующем порядке).

   <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>

2. Подключите CSS (или дополните свой css стилями lightbox).

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

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

Шаг 2 - Использование

1. Добавьте атрибут rel="lightbox" к любой ссылке для активации lightbox. Например:

   <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</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 2
Сайт автора