MultiBox - новый вид галереи в модальном окне

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

Шаг 1. Описание галереи.

MultiBox - это один из современных скриптов галереи. Он имеет множество функций при просмотре. Это объясняется тем, что просматривать в нем можно практически все! Вот список того, что можно загрузить в МультиБокс для просмотра:

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

• .jpg / .gif / .png - изображения;
• .html / .htm / .php - веб-страницы;
• .swf / .flv - флешки;
• .mov / .wmv - видео основных форматов;
• .mp3 - мелодии.

Шаг 2. Подключение каскадных таблиц и их описание.

Итак, начнем, я думаю, с описания каскадных таблиц стилей. В архиве присутствует сразу два файла со стилями. Они находятся в папке css. Это - multibox.css и ie6.css. Ниже я даю их описание:

• multibox.css - в этом файле содержатся все основные стили, нужные для галереи. Без подключения этого файла к документу нашей галереи, работа ее не прекратится, однако все элементы будут некорректно отображаться.
• ie6.css - в этом файле содержатся стили, которые нужны для правильного отображения галереи в браузере Internet Explorer 6. Без подключения этого файла к документу нашей галереи в IE6 все элементы будут некорректно отображаться.

Теперь подключим эти файлы между тегами и таким образом:

Шаг 3. Подключение необходимых JavaScript'ов и их описание.

Теперь нам нужно к нашему документу с галереей подключить несколько JavaScript - файлов. Находятся они в папке js Это - mootools.js, multibox.js и overlay.js. Ниже я даю их описание:

• multibox.js - основной JavaScript нашей галереи;
• mootools.js - файл, с помощью которого сделана база нашей галереи;
• overlay.js - JavaScript, отвечающий за правильность отображения всех элементов галереи.

Ниже я привожу код подключения всех этих JavaScript'ов, который нужно вставить между тегами и Вашего документа

Шаг 4. HTML-конструкция галереи.

Раз мы уже решили делать галерею изображений, то давайте теперь составим HTML-конструкцию, которая будет отображаться на главной странице. В принципе, если Вы хорошо понимаете языки веб-программирования, то Вы можете вместо галереи изображений сделать галерею видео например или демонстрацию каких-либо веб-страниц. Ниже расположен примерный html-код галереи, которую я использовал:

 
 
 
Здесь будет описание фотографии "Высокогорная речушка"
 

Здесь будет описание фотографии "Шан-хай"
 

Здесь будет описание фотографии "Росинки"

 
 

Шаг 5. JavaScript-доработки

Теперь для полноценной работы нашей галереи вставить перед закрытием тега body следующий JavaScript-код:

JavaScript

Шаг 6. Пять советов напоследок...

Что ж, наша галерея готова. Теперь я дам несколько советов по настройке изображений для показа в галерее:

• Старайтесь не запихивать в показ галереи все подряд: флешки, видео, изображения, музыку... Лучше сделайте для каждого формата свою галерею;
• Старайтесь добавлять в галерею изображения одного вида, т. е. или горизонтальные или вертикальные;
• Старайтесь добавлять изображения в едином формате, например .jpg;
• Размер изображения не должен быть очень большим. Помните, что у многих людей разрешение экрана - 1024х768. Просто уменьшите изображение например до размера 800х600;
• Размер мини-изображений которые будут отображаться на странице Вашего сайта не должны быть большими, но и не слишком маленькими. Старайтесь в уменьшении оригинала соблюдать все пропорции изображения.

Заключение.

Вот, в принципе, и все. Думаем, урок Вам очень понравился. Спасибо за внимание, до новых встреч!

Источник урока: www.phatfusion.net