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