Смотри также: библиотека lightbox
Нам понадобится библиотека jQuery, конечно же сам плагин jquery.lightbox.js, файл стилевого оформления, несколько картинок (вперед, назад, загрузка…) и фотографии для Вашей галереи, представленные в двух вариантах: миниатюра и полноразмерное изображение.
jquery.lightbox.js можно скачать на сайте автора
Для начала подключим в разделе HEAD нашей HTML-страницы нужные файлы, конечно же соблюдая пути к ним (у Вас они могут отличаться):
1 |
<script type="text/javascript" src="js/jquery-1.2.6.js"></script> |
2 |
<script type="text/javascript" src="js/jquery.lightbox.js"></script> |
3 |
<link rel="stylesheet" type="text/css" href="lightbox.css" /> |
Затем займемся размещением в теле HTML-страницы миниатюр. Тут простор для творчества – размещайте как, где и сколько хотите миниатюр. Вот например:
03 |
<a href="img/01.jpg" rel="lightbox-tour" title="1-я"><img src="img/01m.jpg" /></a> |
06 |
<a href="img/02.jpg" rel="lightbox-tour" title="2-я"><img src="img/02m.jpg" /></a> |
09 |
<a href="img/03.jpg" rel="lightbox-tour" title="3-я"><img src="img/03m.jpg" /></a> |
12 |
<a href="img/04.jpg" rel="lightbox-tour" title="4-я"><img src="img/04m.jpg" /></a> |
Довольно просто: мы разместили миниатюры в списке (Вы можете избрать другой вариант). Самое главное здесь не список, а то, что мы заключили картинку-миниатюру в тэг А, который ссылается на полноразмерное изображение и имеет атрибут rel со значением lightbox-tour. Вот это действительно важно. Собственно Вы могли бы задать значение lightbox-petya или lightbox-1 для всех фотографий галереи. Здесь важно присутствие ключевого слова lightbox, а разные «окончания» всего лишь идентификатор одной группы фотографий – ведь Вы можете разместить на странице и несколько независимых наборов, которые могут включать в себя от 1 до N (сколько влезет) фотографий. И еще – содержимое атрибута title – это описание, прилагаемое при просмотре к полноразмерной фотографии.
Это самый простой и легкий способ использования плагина jQuery LightBox. Есть и еще один, более гибкий способ. Посмотрите код, приведенный ниже. В jQuery-селекторе мы отбираем все элементы А, которые нас интересуют. Но преимущество этого способа даже не в этом, а в том, что тут можно использовать кое-какие опции, которые мы разберем ниже…
01 |
<script type="text/javascript"> |
02 |
$(document).ready(function(){ |
03 |
$("#selector a").lightbox(); |
04 |
$.Lightbox.construct({ |
06 |
"show_linkback": true, |
18 |
closeInfo: "Клик вне картинки завершит просмотр.", |
21 |
interact: "Интерактивная подсказка" |
24 |
text: "Можно вставить какую-нибудь ссылку", |
25 |
title: "И снабдить ее комментарием...", |
26 |
link: "http://fixblog.ru" |
Набор опций передается в $.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; и так далее…