Разработка сайтов на UMI.CMS
Знать UMI.CMS в совершенстве невозможно.
Даже сами разработчики знают о ней не все...

UMi

Ursa Minor

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

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

 

lightBox

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

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

 

Галерея lightBox

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

<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 

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

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

 

Галерее milkbox

Все, что было сказано про 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 

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

 

 

Галерея 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

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

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

 

 

Галерея mediaboxAdvanced

 

Подключение

<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

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

Новости

30.10.2016

Обновлено описание макроса для вывода всех элементов справочника UMI.CMS с учетом версии 14.

 

21.07.2015

Памятка по обновлению до debian 8.1. Приятно вкусить все плюшки PHP 5.6

11.11.2014

Как выполнить SQL-запрос из bash-скрипта. Памятка

11.11.2014

Как отследить нагрузку сайта на сервер.

06.11.2014

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

05.11.2014

Выкладываю как заготовку свой слайдер изображений на mootools

Все обновления