→   Галерея «LightBox JS» v2.0

LightBox JS — скрипт, позволяющий отображать изображения на веб-страничках. Легко подключается и настраивается.

Галерея LightBox JS

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

1) Lightbox использует фреймворк Prototype и Scriptaculous. Таким образом в разделе <head> нужно подключить три js файла:

  1. <script type="text/javascript" src="js/prototype.js"></script>
  2. <script type="text/javascript" src="js/scriptaculous.js"></script>
  3. <script type="text/javascript" src="js/lightbox.js"></script>
.

2)  Далее подключаем css.

  1. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Еще конечно же, важно не забыть подключить графику, позволяющую управлять отображением картинок. За это отвечают файлы: prev.gif, next.gif, loading.gif и close.gif ссылки на них прописаны в lightbox.js

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

Если надо отобразить одну картинку, то активируем плагин, следующим образом:

  1. <a href="images/prev-image.jpg" rel="lightbox" title="description"><img src=” images/big-image.jpg”></a>

То есть, добавляем тегу ссылки <a>, атрибут rel="lightbox" для активации Lightbox. Также нужно обратить внимание, на то, что можно добавлять описание выплывающей картинке с помощью атрибута title.

Если же надо отобразить сет изображений, то есть чтобы можно было «листать» изображения, то можно дополнительно написате в атрибут rel - определяющий идентификатор группы в квадратных скобках. Вот так:

  1. <a href="images/image1.jpg" rel="lightbox[group]">image</a>
  2. <a href="images/image2.jpg" rel="lightbox[group]">image</a>
  3. <a href="images/image3.jpg" rel="lightbox[group]">image</a>
  4. <a href="images/image4.jpg" rel="lightbox[group]">image</a>
  5. <a href="images/image5.jpg" rel="lightbox[group]">image</a>

Вот такая замечательная галерея. :-)

На оф. сайте можно посмотреть примеры и скачать саму библиотеку: http://www.huddletogether.com/projects/lightbox2/

jQuery