Давно собирался рассказать об этом плагине к библиотеке jQuery, но вот наконец-то собрался ликвидировать этот пробел. Плагин jQuery LightBox пользуется популярностью, и надо сказать вполне заслуженно. Легкий в использовании, гибкий в настройках, что еще нужно организации изящной галереи на сайте?
Давайте, как обычно, начнем с демонстрации работы плагина. Кликните мышкой на первой картинке и посмотрите как работает jQuery LightBox.
Внимание! Эта статья устарела. Новая статья по этой теме: «Галерея LightBox и ее клоны«.


Откройте пример в отдельном окне и посмотрите исходный код.

Итак, что же нужно, чтобы использовать такую галерею на своем сайте?

Нам понадобится библиотека jQuery, конечно же сам плагин jquery.lightbox.js, файл стилевого оформления, несколько картинок (вперед, назад, загрузка…) и фотографии для Вашей галереи, представленные в двух вариантах: миниатюра и полноразмерное изображение.

Нужные файлы (включая демонстрационные фото), Вы сможете найти в этом архиве. Сам плагин jquery.lightbox.js и библиотеку jQuery можно найти в разделе Download.

Для начала подключим в разделе HEAD нашей HTML-страницы нужные файлы, конечно же соблюдая пути к ним (у Вас они могут отличаться):

<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
<script type="text/javascript" src="js/jquery.lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="lightbox.css" />

Затем займемся размещением в теле HTML-страницы миниатюр. Тут простор для творчества – размещайте как, где и сколько хотите миниатюр. Вот например:

<ul>
  <li>
    <a href="img/01.jpg" rel="lightbox-tour" title="1-я"><img src="img/01m.jpg" /></a>
  </li>
  <li>
    <a href="img/02.jpg" rel="lightbox-tour" title="2-я"><img src="img/02m.jpg" /></a>
  </li>
  <li>
    <a href="img/03.jpg" rel="lightbox-tour" title="3-я"><img src="img/03m.jpg" /></a>
  </li>
  <li>
    <a href="img/04.jpg" rel="lightbox-tour" title="4-я"><img src="img/04m.jpg" /></a>
  </li>
</ul>

Довольно просто: мы разместили миниатюры в списке (Вы можете избрать другой вариант). Самое главное здесь не список, а то, что мы заключили картинку-миниатюру в тэг А, который ссылается на полноразмерное изображение и имеет атрибут rel со значением lightbox-tour. Вот это действительно важно. Собственно Вы могли бы задать значение lightbox-petya или lightbox-1 для всех фотографий галереи. Здесь важно присутствие ключевого слова lightbox, а разные «окончания» всего лишь идентификатор одной группы фотографий – ведь Вы можете разместить на странице и несколько независимых наборов, которые могут включать в себя от 1 до N (сколько влезет) фотографий. И еще – содержимое атрибута title – это описание, прилагаемое при просмотре к полноразмерной фотографии.

Это самый простой и легкий способ использования плагина jQuery LightBox. Есть и еще один, более гибкий способ. Посмотрите код, приведенный ниже. В jQuery-селекторе мы отбираем все элементы А, которые нас интересуют. Но преимущество этого способа даже не в этом, а в том, что тут можно использовать кое-какие опции, которые мы разберем ниже…

<script type="text/javascript">
$(document).ready(function(){
$("#selector a").lightbox();
$.Lightbox.construct({
  "speed": 700,
  "show_linkback": true,
  "keys": {
    close: "q",
    prev: "z",
    next: "x"
  },
  "opacity": 0.7,
  "rel": box-tour,
  text: {
    image: "Картинка",
    of: "из",
    close: "Закрыть",
    closeInfo: "Клик вне картинки завершит просмотр.",
    help: {
      close: "Закрыть",
      interact: "Интерактивная подсказка"
    },
    about: {
      text: "Можно вставить какую-нибудь ссылку",
      title: "И снабдить ее комментарием...",
      link: "http://www.linkexchanger.su/2008/65.html"
    }
  }
});
});
</script>

Набор опций передается в $.Lightbox.construct({});. В общем-то все опции имеют говорящие названия, но раз обещал их пояснить…
speed – скорость перехода от одной картинки к другой, указывается в миллисекундах.
show_linkback – показывать или не показывать ссылку при просмотре. Принимает значения true/false. По умолчанию true – показывать.
opacity – прозрачность общего фона при просмотре. Изменяется от 0 до 1. По умолчанию установлено 0.9.
keys – тут можно определить клавиши управления при просмотре. Принимает набор из пар ключ/значение. close – ясное дело закрыть, prev – предыдущая картинка, next – следующая. По умолчанию close:c, prev:p, next:n.
text – тут уж совсем пояснять нечего. Просто посмотрите пример…

Я привел не все опции – остальные Вы сможете обнаружить, если откроете файл jquery.lightbox.js и найдете строки 455 – 520.

Что еще можно натворить с jQuery LightBox, чтобы Ваш экземпляр немного отличался от своих собратьев? Пожалуй немного поковырять стилевое оформление в файле lightbox.css. Ну например, чтобы изменить цвет фона с установленного по умолчанию черного на какой-нибудь зеленый, найдите #lightbox-overlay и поменяйте background-color:#0000; на background-color:#00ff00; и так далее…

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru