Imago – это удобный в использовании AJAX скрипт для создания галлерей. Он представляет собой простой JavaScript с использованием Mootools.

Характерные особенности:

• простота использования
• маленький размер
• хорошо продуманный код и CSS
• полная настраиваемость посредством CSS
• поддержка SimpleViewer Gallery
• поддержка Flickr
• поддержка Smugmug
• построен на основе mootools

Использование

Imago использует XML формат SimpleViewer Gallery. Это значит, что для того, чтобы создать галерею, нужно использовать один из следующих инструментов:

1. Imago Picasa Exporter – устанавливается как любой другой шаблон Picasa
2. Directory2ImagoGallery Script
3. Imago skin для JAlbum

Также вы можете установить Imago вручную и использовать любой инструмент, совместимый с SimpleViewer для создания галереи.

Ручная установка

Добавляем скрипты в заголовок страницы:

<script src="scripts/mootools.v1.11.js" type="text/javascript" />
<script src="scripts/imago.js" type="text/javascript" />
<link rel="stylesheet" href="styles/imago.css" type="text/css" />

Добавляем следующий div в то место, где нужно вставить галерею:

<div id="imagogallery" class="imagogallery">
this.loader = new GalleryLoader('gallery.xml', 'gallery', "Madeira");
</div>

loader является единственным обязательным параметром для галереи.

Для загрузки изображений из Flickr, воспользуйтесь соответствующим загрузчиком FlickrLoader:

<div id="imagogallery" class="imagogallery">
this.loader = new FlickrLoader();
</div>

Lightbox это простой, ненавязчивый скрипт, который показывает изображения в окне на текущей странице.

Установка

Поскольку Lightbox зависит от библиотек Prototype и Scriptaculous, добавляем их:

<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>

Далее подключаем CSS:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

Затем отмечаем ссылки на изображения, которые нам нужно показывать в lightbox-е при помощи атрибута rel:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Значение атрибута title является необязательным и применяется для добавления подписи к изображениям. Если необходимо создать галерею изображений, то в атрибуте rel указываем в квадратных скобках уникальное имя галереи:

<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>