Когда веб мастер трясется над своим сайтом как над дитем, то само собой ему хочется чтобы и нос без соплей и памперсы поменяны. Ну, в общем, чтобы все на месте и как надо. Обтачивать странички сайта можно до идеала бесконечно и долго. И одним из таких этапов может стать желание веб мастера открывать изображение на страничках поверх основной странички. То есть кликнул, на полупрозрачном фоне видно основную страничку, а поверх картинку, на которую кликнул. Называется это не иначе как Lightbox. Так вот, если у вас есть такая необходимость, для движка Joomla, то мы вам в этой статье поможем. Ведь именно здесь мы вас научим как можно реализовать Lightbox в Joomla с минимальными телодвижениями.
Возможности Joomla относительно Lightbox
Сразу надо сказать, что в Joomla как в айсберге видно лишь верхушку, а все само основное и порой интересное скрыто от глаз. Так и относительно возможности работы с открытием новых окон поверх страницы. По факту Joomla уже поддерживает такую возможность, надо лишь все правильно прописать и вставить.
В первую очередь необходимо вставить в файл index.php, тот который лежит в вашем конкретном шаблоне движка определенные строки. Необходимо будет вставить строчку <?php JHTML::_('behavior.modal'); ?>
между тегами <head> и </head>. Вот теперь оказывается уже наш движок сможет открывать что-то в новом окне. Однако надо вначале определить, что у нас будет этим «что-то». Собственно что надо, так это присвоить этому «что-то» класс и тогда движок как раз и будет открывать все в новой вкладке поверх, то есть в Lightbox
Модальное окно в Joomla для картинки
Для вывода фото в модальном окне мы обязательно указываем класс modal и ссылку на оригинальное изображение
<a class="modal" title="Чижик" href="/images/pic800.jpg"><img src="/images/pic120.jpg"></a>
Модальное окно в Joomla для контента - текста
Для вывода в лайтбоксе материала мы также указываем класс modal, ссылку на нужную страницу и размер модального окна
<a href="/..." class="modal" rel="{handler: 'iframe', size: {x: 620, y: 480}}">ссылка на lightbox 620x480px</a>. Еще одно но, в конце ссылки вставляем ?tmpl=component.