SqueezeBox это реализация Lightbox в Joomla

Для его применения в head область index.php файл шаблона нужно добавить следующий код:

<?php JHTML::_(&#39;behavior.modal&#39;); ?>

Здесь можно посмотреть как выглядит данная функция

Этот код добавит в HTML код страницы следующий скрипт:

<link rel="stylesheet" href="/joomla_v1.5.13/media/system/css/modal.css" type="text/css" />
<script type="text/javascript" src="/joomla_v1.5.13/media/system/js/modal.js"></script>
<script type="text/javascript">window.addEvent(&#39;domready&#39;, function() {SqueezeBox.initialize({});
$$(&#39;a.modal&#39;).each(function(el) {el.addEvent(&#39;click&#39;, function(e) {new Event(e).stop();
SqueezeBox.fromElement(el);});});});</script>

Теперь для применения Lightbox эффекта нужно добавить в материал следующий код:

<a class="modal" href="location" title="caption"><img src="location" alt="description" title="caption" /></a>

Данный HTML код используется для отображения картинки во всплывающем окне. Его также можно использовать и для отображения страницы с текущего сайта. Чтобы во всплывающем окне был только сам материал, а не вся страница,  нужно в параметры ссылки добавить ?tmpl=component или &tmpl=component

<a class="modal" href="location?tmpl=component" title="caption">Станица с текущего сайта</a>

 

Чтобы открыть страницу во всплывающем окне с другого сайта, нужно использовать код:

<a rel="{handler: &#39;iframe&#39;, size: {x: width, y: height}}" href="address" class="modal">link name</a>

или для php кода:

<?php 
$myselector = "mylinkclass";
$mysizex = 800;
$mysizey = 600; 
JHTML::_(&#39;behavior.modal($myselector,&#39;size&#39;{x:$mysizex, y:$mysizey})&#39;);
?>

Станица будет открыта в плавающем фрейме. Если это материал с сайта Joomla, также можно использовать параметр tmpl=component. Правда, в этом случае во всплывающем фрейме не будут загружены таблицы стилей и ,соответственно, материал будет выглядеть не совсем так, как он выглядит на удаленном сайте.

Если мы хотим открыть материал с текущего сайта в плавающем фрейме, нужно в разметку компонента содержания components/com_content/views/article/tmpl/default.php добавить код:

<?php if (JRequest::getVar(&#39;tmpl&#39;) != &#39;component&#39;) :?>
Здесь нужно перечислить нужные таблицы стилей:
JHTML::stylesheet(&#39;mystyle.css&#39;,&#39;templates/template_name/css/&#39;,
array(&#39;media&#39;=>&#39;all&#39;));
<?php endif; ?>

Добавление данного кода сохранит форматирование материала.

Или лучше скопировать файл разметки в папку шаблона html/com_content/article/

Комментарии   

#13 Николай 22.03.2015 13:34
Цитирую lipsait:
behavior.modal вещь хорошая, но как к этому классу прикрутить лупу при наведении мыши на картинку, что бы было понятно, что картинка кликабельная.

К классу прикручивать ничего не надо, думаю. Скорее всего можно попробовать использовать css код для ссылки в которой находится эскиз.
a:after{content:''}
Вот на эту тему есть
http://htmlbook.ru/css/content
или еще что найдете в поиске..
#12 lipsait 21.03.2015 15:06
behavior.modal вещь хорошая, но как к этому классу прикрутить лупу при наведении мыши на картинку, что бы было понятно, что картинка кликабельная.
#11 Alex D. 04.02.2015 14:55
Цитирую Alex D.:
Добавил в head шаблона код...
...короче, всё работает, только проблема в том, что при открытии изображения страница сайта прокручивается вверх((

нашёл решение, в файле template.css найти строку overflow-y: и придать ему значение none
#10 Alex D. 04.02.2015 09:22
Добавил в head шаблона код...
...короче, всё работает, только проблема в том, что при открытии изображения страница сайта прокручивается вверх((
#9 Valery 08.09.2014 08:19
Пример CSS лайтбокса http://siteacademy.ru/index.php/css/39-css/creating-a-mod-lightbox-ernwith-css3-and-javascript
#8 Николай 04.05.2013 14:29
Цитирую Игорь:
Ни черта не понял, а вообще для zoo подойдет?

Вообще, на мой взгляд, лучше что-то другое использовать.. http://jdevelop.info/articles/joomla-extensions/335-kakoj-lightbox-ispolzovat-dlya-joomla
zoo или что-то другое .. лайтбокс же к коду компонента не привязан, он срабатывает по атрибутам в ссылке, у каждого лайтбокса какие-то свои атрибуты
#7 Игорь 03.05.2013 10:28
Ни черта не понял, а вообще для zoo подойдет?
#6 Вася 04.11.2012 12:08
Скачал на http://digitarald.de/project/squeezebox/#download архив, в нем папка "assets" и файл "SqueezeBox.js" . Куда их закинуть, чтобы эти скрипты заработали? заранее спасибо за ответ.
#5 Николай 01.11.2012 06:28
Цитирую Максим:
Можно ли сделать переход по фотографиям из всплывшего окна? Стандартный lightbox это позволяет через rel="lightbox[album]", но в данном случае эта конструкция не работает

Похоже он может открывать только одно фото) http://digitarald.de/project/squeezebox/
другой вариант установить lightbox для joomla это rokbox - http://www.rockettheme.com/extensions-downloads/free/1005-rokbox
#4 Максим 31.10.2012 13:54
Можно ли сделать переход по фотографиям из всплывшего окна? Стандартный lightbox это позволяет через rel="lightbox[a lbum]", но в данном случае эта конструкция не работает

Чтобы сделать комментарий, нужно авторизоваться на сайте!