SqueezeBox

SqueezeBox является стандартным для joomla модальным окном, основанном на mootools (стандартный фреймворк joomla), в большинстве случаев данного модального окна достаточно как для сайта-визитки, так и для портала, поддерживаются браузеры: IE 6+, Opera 9, Firefox 1.5+, Safari 3+.

Плагин поддерживает вывод:

  • ajax запросы (возможность получения контента с помощью ajax);
  • вывод/копирование элементов уже существующих на странице;
  • iframe;
  • изображений (без поддержки галереи, т.е. вывод одиночных изображений);
  • видео с YouTube (flash).

Использование.

 

Для использования плагина требуется вызвать в нужном шаблоне (или в шаблоне всего сайта) плагин, делается это следующим образом:

<?php JHTML::_('behavior.modal'); ?>

В стандартной конфигурации плагин будет обрабатывать все ссылки с классом modal, т.е. как вы понимаете подключение (как впрочем и использование достаточно простое и не требует глубоких знаний js).

Рассмотрим несколько простейших примеров:

  1. Ajax запросы (возможность получения контента с помощью ajax):

    JS:
    window.addEvent('domready', function() {
        SqueezeBox.assign($$('a[rel=boxed]'), {
            size: {x: 300, y: 400},
            ajaxOptions: {
                method: 'get'
            }
        });
    });
    Html:
    <a href="request.html" rel="boxed">Получение контента с помощью ajax.</a>
    Приведенный выше образец JS позволяет загрузить контент в модельное окно посредством ajax-запроса, для этого к ссылке добавляется атрибут rel=«boxed», являющийся маркером, на который ориентируется плагин.

  2. Вывод элементов уже существующих на странице мы подробно рассматривали в статье «Вывод модуля «Login» во всплывающем окне.»

  3. Вывод контента в iframe.

    JS:
    window.addEvent('domready', function() {
        SqueezeBox.assign($$('a.boxed'), {
            parse: 'rel'
        });
    });
    Html:
    <a href="http://google.com" class="boxed" rel="{handler:'iframe',size:{x:840,y:550}}">Google</a>
    В данном примере плагин ориентируется на ссылку с классом boxed, при этом в атрибуте rel указывается, что ссылка открывается в iframe размерами 840*550 пикселей.

  4. Вывод изображений.

    JS:
    window.addEvent('domready', function() {
        SqueezeBox.assign($$('a[rel=boxed]'));
    });
    Html:
    <a rel="boxed" href="адрес_большого_изображения.jpg"><img src="адрес_превью.jpg" alt="Заголовок" /></a>
    Т.е. для вывода полноразмерного изображения в модальном окне мы указывем плагину обрабатывать ссылки (ссылки на полноразмерное изображение) с атрибутом rel=«boxed».

  5. Вывод видео с YouTube (flash).

    JS:
    SqueezeBox.parsers.swf = function(preset) {
        return (preset || this.url.test(/\.swf/)) ? this.url : false;
    };

    SqueezeBox.handlers.swf = function(url) {
        var size = this.options.size;
        return new Swiff(url, {
            id: 'sbox-swf',
            width: size.x,
            height: size.y
        });
    };

    window.addEvent('domready', function() {
        SqueezeBox.assign($$('a.boxed'), {
            parse: 'rel'
        });

    });
    Html:
    <a href="http://www.youtube.com/watch?v=JTSoD4BBCJc" class="boxed" rel="{url:'http://www.youtube.com/watch?v=JTSoD4BBCJc',handler:'swf',size:{x:425,y:350}}">The Hobbit Official Trailer</a>
    Т.е. кроме того, что требуется указать ссылку на видео, нужно дополнительно в атрибуте rel указать, что это swf и url данного видео.

 

Параметры.

 

Атрибут rel может иметь несколько параметров:

ПараметрОписаниеЗначенияПример
ajaxOptionsПрименяемый для работы с контентом методpost, getajaxOptions: { method: 'get' }
handlerОбработчикadopt, iframe, swf, image, clone, ajaxhandler:'swf'
fullScreen   
parseSecure   
closableЗакрытие модельного окнаtrue, falseclosable: true
closeBtnКнопка закрытияtrue, falsecloseBtn: true
iframePreloadЗагрузка содержимого iframe, перед показом  
iframeOptionsОпции вывода iframe  
urlАдрес  url:'http://www.youtube.com/'
sizeРазмер модального окна size:{x:425,y:350}
shadowТеньtrue, false 
    
onOpenСобытие при открытии модального окна  
onCloseСобытие после закрытия модельного окна onClose:update
onUpdate   
onResizeСобытие после изменения окна браузера  
onMove   
onShowСобытие при показе модального окна  
onHideСобытие при скрытии модального окна  

 

Документация.

 

SqueezeBox — Expandable Lightbox
Mootools

 

6 comments
<a rel=«boxed» href=«адрес_большой_картинки.jpg»><img src=«адрес_превью.jpg» alt=«Заголовок» /></a>
Я адрес ссылки изменил вот тут выше см.
Да, извиняюсь, пропустил :)
Единственная, на мой взгляд, загвоздка — неудобно использовать в материалах… А универсального плагина, который все это умеет Я пока не встречал… Допустим Я смогу все это быстро реализовать, например пару фоток во всплывающем окне, а вот авторы будут стучать по клавиатуре, поэтому приходится юзать плагины типа Simple Image Gallery и т.п.
Несовсем, я переделывал smartresizer на использование SqueezeBox, кроме того можно тот же smartresizer самостоятельно дописать до адекватной обработки маркеров типа {youtube=http://www.youtube.com/watch?v=JTSoD4BBCJc}, а вот остальное скорее для использования в шаблонах. Единственный минус SqueezeBox — отсутствие режима «галерея».