Всплывающее окно в Joomla 1.7 без плагинов и модулей.

1 звезда2 звезда3 звезда4 звезда5 звезда (5 голос, рейтинг: 4,40 из 5)
Loading ... Loading ...

Хотите оперативно получать новые уроки и статьи блога LAWANS.RU. Просто введите ВАШ e-mail на форме справа >>>

Привет Всем!

Сегодня хочу рассказать об одной внутренней фишке в CMS Joomla. Может быть кто-то не знает, что в Joomla (и в версии 1.7 в том числе) есть такая фишка c всплывающими окнами. Она позволяет  собственными средствами (без использования сторонних модулей и плагинов) делать всплывающие окна с затемнение экрана. Это можно применять, например и для увеличения картинок и для всплывающих окон с текстом.

Конечно, вы скажите есть плагины для этого, но иногда ради двух-трёх таких всплываний смысла ставить плагин нет.

Хотя есть минус для всплывания изображений –  придётся делать два вида изображений маленькие и большие для увеличения.

Для начала в вашем шаблоне необходимо добавить перед закрывающим тегом </head> строку вида:

<?php JHTML::_(‘behavior.modal’, ‘a.modal’, array(‘handler’ => ‘ajax’)); ?>

Для подключения обработчика модальных окон.

Далее уже в контенте делаете следующие ссылки:

1) Код  со ссылкой на большое изображение во всплывающем окне будет выглядеть так:

<a href=’images/test_big.jpg’ class=’modal’ rel=’{handler: `iframe`, size: {x: 600, y: 550}, onClose: function() {}}’><img src=’images/test_small.jpg’ border=’0′ alt=’ ‘ /></a>

Где images/test_small.jpg – путь для маленькой картинки, а images/test_big.jpg – путь для большой картинки

Т.е. для всплывания окна необходимо добавить помимо основных тегов всего-навсего ещё

class=”modal”

и

rel=’{handler: `iframe`, size: {x: 600, y: 550}, onClose: function() {}}’ – где x: 600, y: 550 – размеры всплывающего окна

А вот что получается на сайте.

всплывающая картинка

2) Для загрузки текста из другого файла во всплывающем окне пользуемся кодом вида:

<a class=’modal’ href=’images/index1.html’ rel=’{handler: `iframe`, size: {x: 100, y: 100}, onClose: function() {}}’>Текст</a>

текст во всплывающем окне

3) Можно ещё загрузить и видео во всплывающем окне например с Youtube.

<a class=’modal’ href=’http://www.youtube.com/watch?v=sa8E_wpsTpQ’ rel=’{handler: `iframe`, size: {x: 600, y: 550}, onClose: function() {}}’> Это мое видео</a>

На этом собственно всё! Жду ваших вопросов и комментариев.


У ВАС ведь есть ТЕЛЕФОН? Или mp3-player? А может даже планшет, ноутбук или игровая консоль!
Хочется, чтобы он был необычным и уникальным?
Заходите к нам – мы поможем.

  
  
{lang: 'ru'}

Похожие статьи

16 thoughts on “Всплывающее окно в Joomla 1.7 без плагинов и модулей.

    • Сновидец, я проверял и писал данную статью применяя данный код на стандартном шаблоне beez_20. Всё работало. Возможно на каких то шаблонах, где применяется jquery могут быть конфликты надо смотреть частном порядке.

      • А обосновывать не надо? Как собачка, “тяв” из-за угла и исчез. Код и разметка здесь элементарные, их иначе и не напишешь. Хотя, может уважаемый гениальный комментатор изобрел свой велосипед? Ну тогда в студию, будьте добры.

    • Добрый день. Файл у шаблона это обычно index.php (лежит в папке templates/_имя_шаблона_/index.php) у шаблона, который является по умолчанию в менеджере шаблонов. У платных шаблонов это могут быть и другие файлы формата .php в той же папке. Это надо смотреть индивидуально.

  1. подскажите а нельзя в iframe в котором всплывает изображение передать ещё пару параметров, т.е по мимо размера мне бы засунуть туда scrolling=”no”, не пойму как правильно вставить. Кто сталкивался. отпишитесь. Заранее спасибо!

  2. А как размер модального окна сделать по умолчанию с размером картинки???
    А то без этого тут скролы не красивые появляются

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>