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 может иметь несколько параметров:

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

SqueezeBox — Expandable Lightbox
Mootools

• Element.Dimensions
• Fx.Tween
• Fx.Morph
• Selectors
• JSON
• DomReady