Как подключить lightbox на prototype

Ранее на моем блоге появилась статья о том, как подключить lightbox для web страницы. В статье приведен пример самого простого скрипта, с помощью которого можно организовать галерею на сайте.

В настоящее время появилась его более поздняя версия (2.04, если быть точными). Скрипт значительно усовершенствован.

Новый скрипт обладает следующими преимуществами:

  • красивые эффекты
  • возможность объединять изображения в группы и просматривать их в режиме галереи
  • в режиме галереи можно управлять показом картинок с помощью клавиатуры
  • отлично подойдет для сайтов, где уже используется библиотека prototype. По популярности библиотека prototype уступает jquery, но тоже весьма распространена.

Недостатки на мой взгляд:

  • размер 186 Кб.
  • подключение скрипта происходит по событию onload, что может привести к трудностям в установке на бесплатном хостинге, где по этому же событию цепляется реклама. Впрочем на официальном сайте дано лекарство

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

Чтобы установить lightbox2 на сайте, его надо скачать. Можно это сделать как с моего, так и с официального сайта (он немного больше, я убрал все лишнее). Далее надо распаковать содержимое архива в корень сайта (в принципе можно в любую директорию, но тогда придется переписать пути).

Сначала скрипт надо подключить. Для этого в head страницы надо вставить код:

Затем для красивого отображения надо в блок head подключить стилевую таблицу:

Важно убедиться, что соответствующие картинки кнопок («вперед», «назад», «закрыть» и «загрузчик») доступны по адресам, прописанным в CSS.

И наконец скрипт надо активировать. Делается это аналогично предыдущим версиям путем построения следующих конструкций:

или

Пример:
lightbox-пример использования

Если имеется несколько картинок, логически объединенных в группу, можно сделать галерею с поочередным просмотром. Она отличается от обычной тем, что можно осуществлять навигацию между картинками, нажимая на кнопки вперед и назад (в том числе и на клавиатуре).

Для того, чтобы ее сделать, надо применить конструкцию:

Пример:
lightbox-пример использованияlightbox-пример использованияlightbox-пример использованияlightbox-пример использования

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

  • Андрей

    Делаю сайт на ucoz, В редакторе главной страницы написал вот так:

    image #1
    Новая встраиваемая акустическая система окружающего звучания KEF CiFDT!

    Все файлы из архива загрузил на сайт! Ничё не работает!!!!

    • Должно работать и на ucoz. rel=»lightbox» наверное забыли прописать.