Галереи изображений

Естественно, галереи для mootools

 

lightBox

Разработчик //clientcide.com/wiki/cnet-libraries/

Симпатичная галерея, позволяет открывать как отдельные штучные картинки, так и пакетно.

 

Галерея подключается в шапке

<link rel="stylesheet" href="/js/lightBox/lightBox.css" type="text/css" media="screen" /> 
<script src="/js/lightBox/lightBox.js" type="text/javascript"></script> 

Требующие обработки ссылки маркируются атрибутом rel="lightbox". Если требуется организовать пролистывание нескольких изоблажений, следует указать в атрибуте некий идентификатор галереи в стиле rel="lightbox[1]". Можно иметь несколько независимых галерей на странице.

Если ссылка имеет непустой атрибут title, он будет выведен как подпись во всплывающем окне. Если требуется вывести сложную подпись, с html-форматированием, следует использовать Elements Storage, сохранив требуемый код в значении title, например:


<li>
<a rel="lightbox[1]" class="image" href="/images/h/4_view_h.jpg">
    <img src="/images/h/4_list_h.jpg">
</a>
    <div class="popup_text">
         <p>Некий <b>текст</b> с <i>форматированием</i>, "кавычками" и <a href="javascript:alert('!');">ссылкой</a></p>
    </div> 
</li>


В скрытом блоке popup_text, помещается желаемое содержимое.

По загрузке страницы читаем его содержимое и помещаем в  хранилище элемента "a", откуда оно будет прочитано галереей

window.addEvent('domready',function(){
     $$('.popup_text').each(function(item){
         item.getParent('li').getElement('a').store('title',item.get('html'));
     });
}); 

Демо галереи lightBox

Дистрибутив галереи lightBox с русскоязычной навигацией

 

milkbox 

Разработчик //www.reghellin.com

Аналогичная галерея с другим расположением органов управления.

 

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

Подключение

 <link rel="stylesheet" href="/js/milkbox/milkbox.css" type="text/css" media="screen" />
<script src="/js/milkbox/milkbox.js" type="text/javascript"></script> 

Маркировка ссылок rel="milkbox[1]"

 

Демо галереи milkbox

Дистрибутив галереи milkbox с русскоязычной навигацией

 

 

SqueezeBox 

Разработчик //digitarald.de/project/squeezebox/

 

 

На мой взгляд, самая симпатичная. Нет пролистывания изображения, но я его и не люблю. Спартанский стиль - минимум кнопок. В работе лучше всего смотреть на www.affdesign.ru

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

Подключение

 <link rel="stylesheet" href="/js/SqueezeBox/assets/SqueezeBox.css" type="text/css" media="screen" />
<script src="/js/SqueezeBox/SqueezeBox.js" type="text/javascript"></script> 

Метки ссылок rel="boxed"

Галерею требуется инициализировать

window.addEvent('domready',function() { 
     SqueezeBox.assign($$('a[rel^=boxed]'));
}); 

Дистрибутив оригинальной галереи SqueezeBox

Позже расскажу как подключить к ней видеоплеер

 

mediaboxAdvanced

Разработчик //iaian7.com/webcode/mediaboxAdvanced

Настоящий комбайн, принимает изображения, видео в swf, flv, mp4, ссылки на видео в соцсетях и внешний html. В комплект поставки входит 4 скина. Аналогично предыдущим, управляя индексом в атрибуте rel, можно группировать изображения в галереи

 

 

 

Подключение

<link rel="stylesheet" href="/js/mediaBox/mediaboxAdv-Smooth.css" type="text/css" media="screen" />
<script src="/js/mediaBox/mediaboxAdv.js" type="text/javascript"></script>


Демо: темный светлый простой мягкий

В простом скине включил также демонстрацию встроенного проигрывателя флэш и mp3

Подпись задается в title ссылок в виде title="Заголовок1::Подзаголовок"

 

Дистрибутив mediaboxAdvanced с встроенным плеером NonverBlaster

В дальнешйем расскажу как заменить в ней видеоплеер