Вы здесь: Главная > Мои работы > Расширения Joomla > Всплывающее окно с модулем, картинкой, видео, текстом на Joomla 2.5

Бесплатные расширения для Joomla

Всплывающее окно с модулем, картинкой, видео, текстом на Joomla 2.5

Привет, сегодня хотелось бы затронуть тему всплывающих окон на Joomla 2.5, так как чаще и чаще клиенты требуют всякие фишки по типу: всплывающие формы заказа, баннеры, и т.д.

Есть куча готовых решений НО как правило они сделаны для конкретных задач, а я хочу вам показать более универсальный способ.

И так, перейдем от слов к делу.

Для этой цели я использую плагин из комплекта Widgetkit под названием Lightbox, это самое удобное решение которое я нашел на данный момент. Качаем данное расширение с официального сайта, там есть бесплатная версия комплекта Widgetkit Lite (Free), для наших целей нам этого хватит.

Качаем и устанавливаем как обычное расширение Joomla, далее заходим по меню админки в Расширения / Widgetkit и смотрим чтоб плагин Lightbox был включен.

Сейчас давайте посмотрим пару способов вывода контента в всплывающее окно.

Вывод изображения:

 

<a data-lightbox="width:600;height:600;"href="/images/img/myimage.jpg"><img src="/images/img/myimage.jpg"alt=""  width="290px;"/></a>

 

"width:600;height:600" - это у нас размер всплывающего окна, width="290px;" - размер миниатюры.

Вывод текста:

 - Первая часть кода

<div style="display: none;  "> <!--Контейнер скрывающий блок -->  <div id="myblok_name" style="width: 460px; height: 550px; overflow: auto; color:#000000; "> <p>Тут любой контент вставляем</p> </div> </div>


- Вторая часть кода

<a data-lightbox href="#myblok_name">Ссылка</a>

 

Это у нас ссылка при клике на которую выводится всплывающее окно.
#myblok_name - это у нас идентификатор привязанный конкретно к данному блоку, если допустим на одной страничке мы собираемся использовать больше одного блока то надо задавать каждому свой уникальный идентификатор #myblok_name2 к примеру.

Вывод любого модуля:

Мы знаем что для вывода модуля в статье мы используем встроенный плагин Joomla Loadmodule, смотрим в плагине описан синтаксис вывода "Загружает модули, опубликованные в определенной позиции в текст материала (cинтаксис: ) или отдельный модуль по названию (синтаксис:\{loadmodule mod_login\} без знака "\"). Дополнительно можно задать стиль отображения и произвольный заголовок модуля (если используется loadmodule), я думаю вы с этим знакомы уже. Я думаю вы уже догадались как вывести любой модуль, правильно!!!, используем код из примера с текстом.

 - Первая часть кода 

<div style="display: none;"> <!--Контейнер скрывающий блок -->  <div id="myblok_name" style="width: 460px; height: 550px; overflow: auto; color:#000000;"> <p></p> </div> </div>


 - Вторая часть кода

<a  data-lightbox  href="#myblok_name">Ссылка</a>

 Вот и все.