Галерея LightBox

Начинаем, так сказать, с первоисточника и сразу же смотрим демо, замечая при этом нюансы, чтобы потом сравнить с другими галереями.

Ясно, что для использования плагина нужно подключить к веб-странице файл библиотеки jquery-1.3.2.js, файл плагина jquery.lightbox.js и файл стилевого оформления плагина jquery.lightbox.css. Не забудьте, что в папке images полученного архива, хранятся изображения элементов управления, необходимые для работы плагина.

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

Теперь о том, как собственно организовать галерею. Естественно понадобятся изображения из которых будет состоять галерея – миниатюры и соответствующие им полноразмерные изображения. Общая конструкция такая:

<a rel="lightbox" href="images/large.jpg" title="Какой-то текст">
<img src="images/small.jpg" />
</a>

Картинка-миниатюра заключена в тэг а, атрибут href которого указывает на соответствующее полноразмерное изображение. В атрибуте rel содержится ключевое слово – lightbox. Такого кода достаточно, чтобы при клике по миниатюре в отдельном слое открылось большое (именно большое, потому что по умолчанию оно масштабируется, если не помещается в области просмотра) изображение. Текст, содержащийся в атрибуте title тэга a станет комментарием к открывшемуся изображению.

В рассмотренном примере функциональность плагина применена к отдельному изображению, а нам нужно сделать тоже самое для группы. Смотрим следующую разметку:

<a rel="lightbox-tour" href="images/large.jpg" title="Какой-то текст">
<img src="images/small.jpg" />
</a>

К ключевому слову lightbox просто добавили произвольный суффикс, в данном случае -tour. Добавляйте какое-то количество таких конструкций в свой код, назначайте им одинаковый суффикс и плагин автоматически объединит изображения в группы. Естественно, в этом случае, кроме комментариев, которые также будут создаваться из содержимого атрибута title, появятся элементы управления для перемещения по галерее.

Если по каким-то причинам Вам нежелательно использовать атрибут rel, можно обойтись и без него. Создать галерею можно используя простой jQuery-код.

$(function(){
  $('a.gallery').lightbox();
});

Если этот код использовать с приведенной ниже разметкой, то все элементы а, имеющие класс gallery, получат функциональность плагина, и атрибут rel тут не потребуется.

<a class="gallery" href="images/large.jpg" title="Какой-то текст">
<img src="images/small.jpg" />
</a>

Плагин LightBox имеет некоторое количество пользовательских настроек, с помощью которых можно переопределить поведение по умолчанию. Обычно jQuery-плагины принимают такие настройки в виде объекта, передаваемого методу в качестве аргумента. Здесь дело обстоит несколько иначе – для настройки вызывается отдельный метод. Ниже приведен пример кода, который создаст галерею из изображений, заключенных в тэг а с классом gallery и передаст плагину некоторые настройки.

$(function(){
  $("a.gallery").lightbox();
  $.Lightbox.construct({
    text: {
      image: "Фото",
      of: "из"
    },
    download_link: false,
    opacity: 0.5,
    show_linkback: false
  });
});

Кстати, помимо использования $.Lightbox.construct(); есть другая возможность передать настройки – в строке запроса. Примерно так:

<script src="js/jquery.lightbox.js?show_linkback=false&amp;text.image=Фото&amp;text.of=из" type="text/javascript"></script>

ПРИМЕЧАНИЕ: В плагине подразумевается поддержка IE6 и она включена по умолчанию. Для IE6 передача параметров возможна только в строке запроса (остальные браузеры тоже понимают такой способ). Если попытаться использовать $.Lightbox.construct(); то в IE плагин перестает работать. По крайней мере у меня не получилось.

Ну а теперь немного о возможных опциях, которые можно использовать для настройки LightBox.

show_linkback – по умолчанию true, показывает ссылку на страницу плагина на сайте plugins.jquery.com в правом верхнем углу. Передаем false, чтобы скрыть ссылку.
show_helper_text – по умолчанию true, показывает текст (Click to close) в правом верхнем углу и всплывающую подсказку (Hover to interact) при наведении указателя мыши на этот текст. Используем false, чтобы убрать текст (и подсказку естественно тоже).
show_info – по умолчанию ‘auto’, показывает информацию (текст, содержащийся в атрибуте title) под открывшимся изображением только в том случае, если указатель мыши находится над изображением. Чтобы показывать эту информацию независимо от положения указателя мыши используем значение true.
show_extended_info – по умолчанию ‘auto’, показывает дополнительную информацию (Image 1 of nn) при указатель мыши прошел над область, где показывается основная информация (текст, содержащийся в атрибуте title). Чтобы показывать эту информацию независимо от положения указателя мыши используем значение true.
download_link – по умолчанию true, предоставляет возможность открыть полноразмерное изображение в новом окне (вкладке) браузера, воспользовавшись ссылкой, которой является текст комментария к изображению (текст, содержащийся в атрибуте title). Чтобы запретить использование этой возможности, надо передать false.
auto_resize – по умолчанию true, автоматически изменяет размеры картинки, если она слишком большая и не вписывается в область просмотра. Необходимо передать false, чтобы отменить это поведение.
ie6_support – по умолчанию true, включена поддержка IE6. Чтобы отключить ее, надо передать false.
ie6_upgrade – по умолчанию true, показывает сообщение, призывающее пользователей IE6 проапгрейдить свое ПО (у меня почему-то не сработало).
speed – число, определяющее количество миллисекунд, которые отводятся на переход между двумя изображениями. По умолчанию установлено 400.
baseurl – по умолчанию null, но можно указать url для автоматического подключения файлов, которые использует скрипт (стили, картинки).
files – объект, в свойствах которого можно передать местоположение требуемых файлов (используется, если названия файлов менялись). Можно использовать следующие свойства: js.lightbox, js.colorBlend, css.lightbox, images.prev, images.next, images.blank, images.loading.
text – объект, в свойствах которого можно передать текст частей интерфейса. Используется для перевода на нужный язык. Можно использовать следующие свойства: image, of, close, closeInfo, download, help.close, help.interact, about.text, about.title, about.link.
keys – объект, в свойствах которого можно определить «горячие клавиши» для перемещения по галерее вперед и назад, а также для закрытия галереи. Используются свойства close, prev, next.
opacity – прозрачность слоя, который появляется при просмотре галереи между большими изображениями и основным содержимым страницы. Значение может изменяться от 0 до 1. По умолчанию используется значение 0.9.
padding – по умолчанию null, но можно указать число, которое будет определять отступы вокруг просматриваемого изображения.
rel – по умолчанию ‘lightbox’, определяет значение в атрибуте rel тега а (см. пример html-разметки), исходя из которого плагин автоматически формирует галереи. Можно передать строку, в которой определить любое удобное значение.
auto_relify – по умолчанию true, плагин должен автоматически искать и формировать галереи. Чтобы отменить такое поведение следует передать значение false.

Выводы: Плюсы – неплохое оформление, большинство опций действительно полезны. Минусы – сложности с настройкой плагина с учетом поддержки IE6, не все опции удается использовать так, как заявлено разработчиком, не работает ни с каким другим контентом, кроме фото. Имхо, минусов больше, причем перечислены еще не все.

Галерея NFLightBox

По сравнению с обычным LightBox не имеет таких заморочек с настройкой под все основные браузеры, но точно также работает только с фото. Однако имеет возможность автоматической смены изображений – слайдшоу.

Смотрим демо, замечаем отличия от LightBox…

Подключается просто:

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

В разделе HEAD надо указать пути к файлу стилевого оформления, файлу библиотеки jQuery и файлу плагина. Требования к разметке точно такие же, как и у LightBox.

<a href="images/large.jpg" title="Какой-то текст">
<img src="images/small.jpg" />
</a>

Создается галерея с помощью следующего jQuery-кода:

$('a').lightBox({
  overlayBgColor: '#363',
  txtImage: 'Фото',
  txtOf: 'из',
  txtPrev: ' Назад',
  txtNext: ' Вперед',
  keyToClose: 'q',
  keyToPrev: 'z',
  keyToNext: 'c'
});

Этот плагин тоже имеет приличное количество настроек. Использование некоторых показано в приведенном выше коде. Довольно полезная опция overlayBgColor – позволяет менять цвет промежуточного слоя между просматриваемым изображением и содержимым веб-страницы. В LightBox для этого пришлось бы править css-файл.

Чуть подробнее про опции, которые можно использовать для настройки.

overlayBgColor – по умолчанию #000 (черный), используется для задания цвета промежуточного слоя.
overlayOpacity – по умолчанию 0.8, задает прозрачность промежуточного слоя. Можно использовать значения от 0 до 1.
imageLoading, imageBtnPrev, imageBtnNext, imageBtnClose, imageBlank, imageBtnBottomPrev, imageBtnBottomNext, imageBtnPlay, imageBtnStop – во всех этих опциях можно передать строку, содержащую путь к файлу изображения соответствующего элемента управления.
containerBorderSize – по умолчанию 10, определяет ширину рамки вокруг просматриваемого изображения.
containerResizeSpeed – по умолчанию 500, время в миллисекундах, за которое будет изменяться размеры области просмотра изображения при переходе от одного изображения к другому.
txtImage, txtOf, txtPrev, txtNext – вполне понятные опции. Например задав значения txtImage: ‘Фото’ и txtOf:’из’ Вы уже будете видеть не Image 1 of 8, а Фото 1 из 8.
keyToClose, keyToPrev, keyToNext – с помощью этих опций можно задать «горячие» клавиши. Например keyToClose:’q’ – при нажатии клавиши ‘q’ просмотр будет прекращен.
slideShowTimer – по умолчанию 5000, т.е.если Вы запустите слайдшоу, то изображения будут меняться каждые 5 секунд.

Выводы: Плюсы – неплохое оформление, большинство опций действительно полезны, есть автоматическая смена фото при просмотре, нет сложностей с настройкой. Минусы – png-файлы для элементов управления не очень здорово выглядят в IE6 (и к сожалению jquery.pngfix.js тут не поможет), не работает ни с каким другим контентом, кроме фото. Имхо, лучше, чем стандартный LightBox, но все же не то, что хочется.

Галерея PrettyPhoto

Так и хочется написать – PrettyPhoto мой выбор! Во-первых, этот плагин позволяет работать не только с фото. В области просмотра можно выводить видео с YouTube, ролики в формате .mov (Apple QuickTime), содержимое во flash-формате и наконец вообще любой контент через iframe. Во-вторых, этот плагин имеет свой API, чего нет в рассмотренных ранее плагинах.
Смотрим демо, отмечаем отличия от других галерей и начинаем разговор про PrettyPhoto.

Сначала необходимо подключить к веб-страницы файл библиотеки jquery-1.3.2.js, файл плагина jquery.prettyPhoto.js и файл стилевого оформления плагина prettyPhoto.css.

<link type="text/css" href="css/prettyPhoto.css" rel="stylesheet" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>

Организация галереи (или галерей) почти не отличается от того, как это делается в LightBox.

<a rel="prettyPhoto[gallery_1]" href="max/1.jpg" title="Фото номер 1">
<img src="min/1.jpg" alt="Фото номер 1" />
</a>

Картинка-миниатюра заключена в тэг а, атрибут href которого указывает на соответствующее полноразмерное изображение. В атрибуте rel содержится ключевое слово – prettyPhoto. Чтобы создать несколько различных галерей на обной веб-странице, в атрибуте rel следует указать например – prettyPhoto[gallery_easy] для условной первой галереи, prettyPhoto[other_gallery] – для другой и так далее…

С помощью jQuery-кода создаем галерею. Используем настройки, установленные по умолчанию.

$(function(){
  $("a[rel^='prettyPhoto']").prettyPhoto();
});

Опции, которые можно использовать для настройки prettyPhoto:
animationSpeed – по умолчанию ‘normal’. Другие возможные значения – ‘fast’ и ’slow’. Скорость анимации изменения размеров окна просмотра при переходе от одного изображения к другому.
padding – по умолчанию 40. Число, опредяляющее отступы вокруг изображения.
opacity – по умолчанию 0.80, прозрачность промежуточного слоя. Изменяется от 0 до 1.
showTitle – по умолчанию true. Заголовок (содержимое атрибута title тэга а), который отображается в левом верхнем углу над областью просмотра. Чтобы отключить надо использовать значение false.
allowresize – по умолчанию true. По умолчанию полноразмерное изображение масштабируется, если ему не хватает места для отображения в полном размере. Можно отменить это поведение, передав false.
counter_separator_label – по умолчанию ‘/’. Разделитель в счетчика изображений галереи.
theme – по умолчанию ‘light_rounded’. Да! Плагин поддерживает несколько тем оформления. Кроме light_rounded возможны также dark_rounded, light_square, dark_square. Вот только для IE6 принудительно используется тема light_square (светлый фон и нескругленные углы).
hideflash – по умолчанию false. Скрывает все flash-объекты на странице при просмотре галереи, чтобы они не отображались поверх. Если этого не требуется, можно установить значение true.
modal – по умолчанию false. Если установить true, будет использоваться модальный режим, т.е. завершить просмотр галереи можно будет только нажатием на картинку ‘close’.

Еще две полезные опции, в которых можно определить callback-функции, вызываемые при наступлении определенного события.
changepicturecallback – функция, определенная в этой опции, будет вызываться каждый раз при смене изображения галереи.
callback – функция, определенная в этой опции, будет вызываться при завершении просмотра.

Плюс ко всем этим полезным опциям, плагин предоставляет четыре метода.

$.prettyPhoto.open(‘path/to/image’,'Title’,'Description’) – метод позволяет открыть нужную галерею. Пример будет чуть позже.
$.prettyPhoto.changePage(‘next’) – с помощью этого метода можно осуществить переход к следующему изображению галереи.
$.prettyPhoto.changePage(‘previous’) – с помощью этого метода можно осуществить переход к предыдущему изображению галереи.
$.prettyPhoto.close() – с помощью этого метода можно закрыть галерею.

Самый большой интерес наверняка вызовет метод, с помощью которого можно открыть галерею практически как угодно и откуда угодно. Поэтому смотрим демо. Код там настолько несложный и понятный даже интуитивно, что не стоит его и комментировать.

В общем эта галерея может удовлетворить наверное все потребности веб-мастеров. Кроме одной – слайд-шоу. Чтобы не было обидно, давайте попробуем немного доработать предыдущий пример. Мы дополнительно подключим плагин jquery.timers.js и воспользуемся тем фактом, что в опциях changepicturecallback и callback можно определить функции. В html-разметке добавим select, откуда можно будет выбирать значения задержки при смене изображений. Что из этого получилось, смотрите демо, там же можно посмотреть и исходный код.

В опции changepicturecallback, пользуясь возможностями плагина jQuery Timers, при смене изображений каждый раз запускаем одноразовый таймер со значением, полученным из выбранной опции в селекте. По срабатыванию таймера вызываем метод $.prettyPhoto.changePage(‘next’) заставляя плагин показывать следующее изображение. В опции callback определяем функцию, которая останавливает таймер, если галерея была закрыта и заодно, с помощью alert благодарим за просмотр.

На самом деле такое решение небезгрешно, но зато сделано «на колене в 5 секунд», поэтому кто имеет желание, может в комментариях предлагать свои идеи по этому поводу.

Все примеры, использованные в этой статье, лежат в этом архиве.

Для тех, кто хочет самостоятельно изучить первоисточники, пожалуйста, ссылки: LightBox, NFLightBox, PrettyPhoto.

Выводы: для себя выбрал именно PrettyPhoto…. по крайней мере пока не появилось что-нибудь еще лучше.

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

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

Нам понадобится библиотека 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; и так далее…