В последние дни, анализируя статистику посещения, я сделал вывод, что аудитория проявляет интерес к jQuery, а именно к галереям и им подобным, поэтому решил уделить побольше внимания на данное направление, к тому же, основные вопросы, которые мне пишут читатели, посвящены именно им.

Итак, на сегодня у нас ещё один портотип галереи - MultiBox. В основу данного творчества заложена технология плагина Mootools, которая обеспечивает яркую и плавную анимацию. Кстати, очень порадавало, что скрипт не перегружен массой библиотек. Всё самое необходимое. Но самая вкуснятина кроется в том, что скрипт позволяет воспроизводить как изображения, так и ролики, и музыку.

Установка MultiBox

Шаг №1

Подключаем необходимые javascript - скрипты:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/overlay.js"></script> 
<script type="text/javascript" src="js/multibox.js"></script>

Шаг №2

Подключаем таблицу стилей:

<link href="css/multibox.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="all"/>

Если Вы используете свою таблицу, то скопируйте содержимое multibox.css.

Заметьте, мы подключаем ещё одну тибличку, которая отвечает за отображение скрипта в браузере Internet Explorer.

Шаг №3

Теперь перед закрытием тега BODY вставляем следующий код:

<script type="text/javascript">
var box = {};
window.addEvent('domready', function(){
box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
});
</script>

Шаг №4

И уже теперь формируем наш HTML-код:

<a href="images/fotos/1.jpg" class="mb" title="Первый город"><img src="images/fotos/1m.jpg" alt="" border="0"/></a>
<div class="multiBoxDesc">Описание фотографии</div>

<a href="images/fotos/2.jpg" id="two" class="mb" title="Второй город"><img src="images/fotos/2m.jpg" alt="" border="0"/></a>
<div class="multiBoxDesc">Описание фотографии</div>

<a href="images/fotos/3.jpg" id="three" class="mb" title="Третий город"><img src="images/fotos/3m.jpg" alt="" border="0"/></a>
<div class="multiBoxDesc">Описание фотографии</div>

Описание в MultiBox помещается в отдельный DIV, который потом методами JS отображается.

На этом, вы думаете, всё. Но не тут то было. Как браузер поймёт что то или иное описание относится к первому изображениею? Никак. Для того чтобы не вводить браузер в заблуждение, стоит прописать уникальный идентификатор ссылке и добавить его через пробел в класс "multiBoxDesc":

<a href="images/fotos/1.jpg" id="one" class="mb" title="Первый город"><img src="images/fotos/1m.jpg" alt="" border="0"/></a>
<div class="multiBoxDesc one">Описание фотографии</div>

<a href="images/fotos/2.jpg" id="two" class="mb" title="Второй город"><img src="images/fotos/2m.jpg" alt="" border="0"/></a>
<div class="multiBoxDesc two">Описание фотографии</div>

<a href="images/fotos/3.jpg" id="three" class="mb" title="Третий город"><img src="images/fotos/3m.jpg" alt="" border="0"/></a>
<div class="multiBoxDesc three">Описание фотографии</div>

Пробуем и убеждаемся, что всё работает.

Форматы, поддерживаемые MultiBox

В самом начале я упомянул, что MultiBox поддерживает различный ряд форматов. Действительно, это так. Даже скажу более - он это делает автоматически. Но, как говорится, доверяй, но проверяй, поэтому лучше будет застраховать себя от возможных ошибок и укажим тип вручную.

Это делает в атрибуте REL. Формат записи следующий: rel="type:формат". Например: