Ранее на моем блоге появилась статья о том, как подключить lightbox для web страницы. В статье приведен пример самого простого скрипта, с помощью которого можно организовать галерею на сайте.
В настоящее время появилась его более поздняя версия (2.04, если быть точными). Скрипт значительно усовершенствован.
Новый скрипт обладает следующими преимуществами:
- красивые эффекты
- возможность объединять изображения в группы и просматривать их в режиме галереи
- в режиме галереи можно управлять показом картинок с помощью клавиатуры
- отлично подойдет для сайтов, где уже используется библиотека prototype. По популярности библиотека prototype уступает jquery, но тоже весьма распространена.
Недостатки на мой взгляд:
- размер 186 Кб.
- подключение скрипта происходит по событию onload, что может привести к трудностям в установке на бесплатном хостинге, где по этому же событию цепляется реклама. Впрочем на официальном сайте дано лекарство
Использовать новую версию скрипта не сложнее, чем предыдущую.
Чтобы установить lightbox2 на сайте, его надо скачать. Можно это сделать как с моего, так и с официального сайта (он немного больше, я убрал все лишнее). Далее надо распаковать содержимое архива в корень сайта (в принципе можно в любую директорию, но тогда придется переписать пути).
Сначала скрипт надо подключить. Для этого в head страницы надо вставить код:
<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>
Затем для красивого отображения надо в блок head подключить стилевую таблицу:
<link rel="stylesheet" href="/css/lightbox.css" type="text/css" media="screen" />
Важно убедиться, что соответствующие картинки кнопок («вперед», «назад», «закрыть» и «загрузчик») доступны по адресам, прописанным в CSS.
И наконец скрипт надо активировать. Делается это аналогично предыдущим версиям путем построения следующих конструкций:
<a title="Заголовок" href="images/image-1.jpg" rel="lightbox" data-mce-href="images/image-1.jpg">картинка #1</a>
или
<a href="images/image-1.jpg" rel="lightbox" data-mce-href="images/image-1.jpg"><img src="images/thumb-1.jpg" alt="" data-mce-src="images/thumb-1.jpg" height="40" width="100"></a>
Если имеется несколько картинок, логически объединенных в группу, можно сделать галерею с поочередным просмотром. Она отличается от обычной тем, что можно осуществлять навигацию между картинками, нажимая на кнопки вперед и назад (в том числе и на клавиатуре).
Для того, чтобы ее сделать, надо применить конструкцию:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]" data-mce-href="images/image-1.jpg">image #1</a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]" data-mce-href="images/image-2.jpg">image #2</a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]" data-mce-href="images/image-3.jpg">image #3</a>
В качестве идентификатора можно использовать любые цифры и буквы. Можно сделать несколько галерей на одной странице, для этого картинкам надо присвоить несколько идентификаторов.