Как создать модальное окно Lightbox в Joomla

Иногда удобно откывать страницу пользователю в модальном окне или показать картинку в Lightbox. Это можно сделать нативными средствами cms Joomla.

В админ панели в медиа-менеджере картинки открываются в лайтбоксе. Это значит, что и на сайте можно открывать картинки и страницы в Lightbox. Как это реализовать?

Создание модальных окон в Joomla

В Joomla существуют расширенные возможности для вывода контента (фото, материала и др.) в отдельном модальном окне используя технологию Lightbox. Для того, что бы заработал Lightbox, надо в index.php вашего шаблона, между тегами <head> и </head> шаблона следующий код:

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

Давайте рассмотрим два варианта.

Модальное окно в Joomla для одной картинки

Вам понадобяться две картинки, маленькая и большая, которые надо положить в директорию images.

Публикуете маленькую картинку в статье, указываете ей класс modal и ссылку на оригинальное изображение, вот так:

<a href="/images/404.png" class="modal modal_link" aria-label="моя супер картинка" data-modal-title="моя супер картинка" data-modal-image="true" data-modal-class-name="is_image"><img src="images/404-min.png" alt="ошибка 404" /></a>

ошибка 404

Модальное окно в Joomla для контента

Что бы открыть контент в модальном окне, небходимо так же добавить ссылке класс modal и добавить в конце ссылки ?tmpl=component

Вот так будет выглядеть код на странице

<a href="404.html?tmpl=component&ml=1" rel="{handler: 'iframe', size: {x: 1024, y: 600}}" class="modal modal_link" aria-label="Popup link" data-modal-class-name="no_title">Станица ошибка 404,которая открывается используя Lightbox</a>

Станица ошибка 404,которая открывается используя Lightbox

P.S. Если у Вас стоит плагин JL No Doubles строку tmpl=component, надо добавить в Стоп слова, иначе будет открывать всю страницу, включая модули, меню и так далее.

Если Вы публикуете ссылку где уже есть знак вопроса "?", то тогда вместо него ставите знак"&"

Если Вы хотите, что бы модальное окно было раскрашено css, добавьте в файл /ваш шаблон/component.php файл template.css.

<link rel="stylesheet" href="<?php echo $this->baseurl . '/templates/' . $this->template; ?>/css/template.css" type="text/css" />

Плагин создания модальных окон в Joomla

моя супер картинка

А можно использовать плагин модальных окон. При использовании плагина в index.php вашего шаблона ничего добавлять не надо. Вот как работает плагин modals. Открываем картинку, что слева в модальном окне, и ссылку ниже.

Станица ошибка 404, которая открывается в модальном окне используя плагин modals

моя ссылка