Почему решил написать этот обзор? Во-первых, предыдущая статья про LightBox безнадежно устарела. Во-вторых, мне LightBox нравится. Правда было время, когда разработчики плагина убирали оттуда поддержку ie6, но потом, видимо одумавшись, вернули ее. В общем, всем хорош плагин LightBox, но вот заточен он только под фото. А если приперло вывести видео с YouTube или вообще какой-нибудь контент в iframe? Да, да, знаю, есть галерея FancyBox, сам пользуюсь, но LightBox все равно больше нравится. Поэтому и было решено покопаться среди многочисленных клонов галереи LightBox.
Галерея 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&text.image=Фото&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…. по крайней мере пока не появилось что-нибудь еще лучше.
Источник: http://www.linkexchanger.su/2009/112.html
.
), но для тех, кто хочет сам покопаться и разобраться повнимательнее –