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

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

demosourse

Шаг 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">Здесь будет описание фотографии &quot;Высокогорная речушка&quot;</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">Здесь будет описание фотографии &quot;Шан-хай&quot;</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">Здесь будет описание фотографии &quot;Росинки&quot;</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.

^ Наверх ^