Тема:
Частенько полноразмерные изображения урезают до мелких "превьюшек" и последние помещают на сайт. Делают это для того, чтобы представить посетителю галерею каких-нибудь товаров или фотографий. Или, например, чтобы не пихать изображение, которое не помещается по своим габаритам в небольшую колонку статьи. Разобрать детали в таких мелких картинках практически невозможно, но понять что вообще на них изображено иногда можно... И когда нажимаешь на такое вот изображение, то происходит практически всегда примерно следующее: открывается новое "урезанное" окошко браузера с полноразмерным изображением. В таком "урезанном" окошке нет ни меню, ни панели инструментов, да и размеры его изменить частенько невозможно. А вот изображение порой бывает выходит за границу такого окошка и просмотреть полностью его становиться невозможно. Вот в таких случаях и возникает вполне закономерный вопрос о применении альтернативных способов показа полноразмерых изображений.
Один из таких способов заключается в использовании библиотеки Lightbox 2. Прежде чем рассказывать об этой библиотеке, приведу пример её использования:
Если же у вас не одно изображение а несколько, то можно организовать навигацию между ними в окне просмотра:
Ну а теперь несколько слов о самой библиотеке. Реализвана она на языке javascript с использованием ajax-движка Prototype Framework и библиотеки Scriptaculous Effects. Работает по заверению авторов во всех современных броузерах. Мне удалось проверить это на Opera 9, Firefox 2, IE 6 и Safari 3 - проблем с работоспособностью обнаружено не было.
Подключение самой библиотеки на удивление просто и выполняется в два шага:
1. Сначала подключаются js-библиотеки и стили отображения для окна просмотра:
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript"
src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css"
media="screen" />
При этом нужно обратить внимание на то, чтобы указанные в css-стиле файлы prev.gif и next.gif, существовали и располагались там где нужно. Также нужно обратить внимание на файлы loading.gif и close.gif, которые объявляются в файле lightbox.js.
2. Для того чтобы картинка открывалась при помощи lightbox, нужно добавить аттрибут rel="lightbox" в тег ссылки на картинку. Заголовок, если таковой требуется, можно разместить в аттрибуте title. Например, так:
<a href="images/image-1.jpg" rel="lightbox"
title="my caption">image #1</a>
Если необходимо разместить несколько логически связанных изображений и организовать навигацию между ними в окошке просмотра, то нужно разместить в аттрибуте rel="lightbox" название группы в квадратных скобках для каждого связанного изображения:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
Архив библиотеки со всеми необходимыми файлами внутри доступен по адресу http://www.huddletogether.com/projects/lightbox2/#download
Предыдущая версия библиотеки LightBox реализована без применения сторонних библиотек. В ней нет анимации и нет возможности просмотра нескольких связанных изображений. В то же время она легче и не притязательнее.
Для тех же, кому не хватет функционапьности LightBox 2, можно порекомендовать библиотеку ThickBox. Эта библиотека позволяет отображать не только картинки, но и текстовые сообщения и смешаннй контент. Реализована она с использованием библиотеки jQuery.
