- Метки урока:
- галерея
- модальные окна
- изображения
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 все элементы будут некорректно отображаться.
Теперь подключим эти файлы между тегами <head> и </head> таким образом:
<link href="css/multibox.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/ie6.css" type="text/css" media="all" />
Шаг 3. Подключение необходимых JavaScript'ов и их описание.
Теперь нам нужно к нашему документу с галереей подключить несколько JavaScript - файлов. Находятся они в папке js Это - mootools.js, multibox.js и overlay.js. Ниже я даю их описание:
- multibox.js - основной JavaScript нашей галереи;
- mootools.js - файл, с помощью которого сделана база нашей галереи;
- overlay.js - JavaScript, отвечающий за правильность отображения всех элементов галереи.
Ниже я привожу код подключения всех этих JavaScript'ов, который нужно вставить между тегами <head> и </head> Вашего документа
<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>
Шаг 4. HTML-конструкция галереи.
Раз мы уже решили делать галерею изображений, то давайте теперь составим HTML-конструкцию, которая будет отображаться на главной странице. В принципе, если Вы хорошо понимаете языки веб-программирования, то Вы можете вместо галереи изображений сделать галерею видео например или демонстрацию каких-либо веб-страниц. Ниже расположен примерный html-код галереи, которую я использовал:
<div id="container">
<div id="example">
<a href="photos/river.jpg" id="mb1" class="mb" title="Высокогорная речушка"><img src="photos/river_mini.jpg" alt="" border="0" /></a>
<div class="multiBoxDesc mb1">Здесь будет описание фотографии "Высокогорная речушка"</div>
<a href="photos/shan-khai.jpg" id="mb2" class="mb" title="Шан-хай"><img src="photos/shan-khai_mini.jpg" alt="" border="0" /></a>
<div class="multiBoxDesc mb2">Здесь будет описание фотографии "Шан-хай"</div>
<a href="photos/dew.jpg" id="mb3" class="mb" title="Росинки"><img src="photos/dew_mini.jpg" alt="" border="0" /></a>
<div class="multiBoxDesc mb3">Здесь будет описание фотографии "Росинки"</div><br />
</div>
</div>
Шаг 5. JavaScript-доработки
Теперь для полноценной работы нашей галереи вставить перед закрытием тега body следующий JavaScript-код:
JavaScript
<script type="text/javascript">
var box = {};
window.addEvent('domready', function(){
box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true});
});
</script>
Шаг 6. Пять советов напоследок...
Что ж, наша галерея готова. Теперь я дам несколько советов по настройке изображений для показа в галерее:
- Старайтесь не запихивать в показ галереи все подряд: флешки, видео, изображения, музыку... Лучше сделайте для каждого формата свою галерею;
- Старайтесь добавлять в галерею изображения одного вида, т. е. или горизонтальные или вертикальные;
- Старайтесь добавлять изображения в едином формате, например .jpg;
- Размер изображения не должен быть очень большим. Помните, что у многих людей разрешение экрана - 1024х768. Просто уменьшите изображение например до размера 800х600;
- Размер мини-изображений которые будут отображаться на странице Вашего сайта не должны быть большими, но и не слишком маленькими. Старайтесь в уменьшении оригинала соблюдать все пропорции изображения.
Заключение.
Вот, в принципе, и все. Я полностью рассказал Вам все, что мог знать об этом интересном варианте галереи. Думаю, урок Вам очень понравился. Спасибо за внимание, до новых встреч!
С искренним уважением, Максим Курочкин
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.phatfusion.net
Перевел: Максим Курочкин
Урок создан: 17 Июня 2009
Просмотров: 103870
Правила перепечатки
5 последних уроков рубрики "Mootools"
-
Создание меню при помощи MenuMatic 0.68.3
Создание горизонтального и вертикального меню при помощи MenuMatic 0.68.3
-
Анимированные закладки с использованием MooTools
Один из возможных способов поместить много контента на одно небольшое место - это использование системы закладок. Данный урок покажет как создать систему анимированных закладок с использованием CSS, куки и анимированного переключения панелей.
-
Выезжающая панель для сайта на Mootools
Изучив этот урок, Вы научитесь делать компактную выплывающую панель для сайта. Разрабатывать ее мы будем с помощью Mootools, ну и конечно же не обойдемся и без CSS-стилей, которые будут играть здесь роль дизайнинга панели
-
Увеличение / Уменьшение текстовых полей с помощью MooTools
Короткий урок про то, как добавить к любому текстовому полю возможность увеличения или уменьшения.
-
Multi-Select c помощью MooTools
В этом уроке речь пойдет о переносе выбранных опций из одного multi-select в другой. Думаю, что подобный виджет вы уже видели. Обычно он применяется на сайтах объявлений и регистрации в каталогах, где ваше объявление (ваш сайт) подходит для размещения в нескольких рубриках. В этом уроке мы реализуем подобный виджет с помощью Mootools.