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

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

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

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

1 .jpg / .gif / .png - изображения;

2 .html / .htm / .php - веб-страницы;

3 .swf / .flv - флешки;

4 .mov / .wmv - видео основных форматов;

5 .mp3 - мелодии.

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

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

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

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

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

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

 

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

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

multibox.js - основной JavaScript нашей галереи;

mootools.js - файл, с помощью которого сделана база нашей галереи;

overlay.js - JavaScript, отвечающий за правильность отображения всех элементов галереи.

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

 
 
 

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

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

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

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

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

JavaScript

 

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

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

1 Старайтесь не запихивать в показ галереи все подряд: флешки, видео, изображения, музыку... Лучше сделайте для каждого формата свою галерею;

2 Старайтесь добавлять в галерею изображения одного вида, т. е. или горизонтальные или вертикальные;

3 Старайтесь добавлять изображения в едином формате, например .jpg;

4 Размер изображения не должен быть очень большим. Помните, что у многих людей разрешение экрана - 1024х768. Просто уменьшите изображение например до размера 800х600;

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

Вот, в принципе, и все.

Другие статьи по рубрике «Mootools»

Интересное меню на Mootools

Добавить комментарии



[CODE] [/CODE]


Комментариев нет!