This page is hosted for free by zzz.com.ua, if you are owner of this page, you can remove this message and gain access to many additional features by upgrading your hosting to PRO or VIP for just 32.50 UAH.

Веб мастер - CMS Joomla

Не работает? Начинай читать инструкцию.

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

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

Предлагаю ознакомиться с предложениями моих партнёров

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

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

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

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

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

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

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

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

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

ошибка 404

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

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

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

<!-- START: Modals --><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"><!-- END: Modals -->Станица ошибка 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

Предлагаю ознакомиться с предложениями моих партнёров