Постановка задачи: существует модуль вывода анонса новостей. По клику на “подробнее” (или, например, на заголовок новости) необходимо осуществить вывод полного текста во всплывающем окне. Причем, желательно, чтобы загрузка текста осуществлялась при помощи AJAX. И со спецэффектами ).
Итак, MooTools нам в помощь).
В качестве примера будем рассматривать стандартный модуль в сборке Joomla! CMS – mod_latestnews.php (Последние новости).

Что нам потребуется:
1) непосредственно MooTools. В сборке библиотеки должны присутствовать следующие модули:

  • Element.Dimensions
  • Fx.Tween
  • Fx.Morph
  • Selectors
  • DomReady

2) плагин к MooTools – SqueezeBox – Expandable Lightbox (v1.1) (скачать)
3) CSS к плагину
4) небольшие картинки spinner.gif и closebox.png, участвующие в оформлении всплывающего окна.

Для особо ленивых – архив со всем вышеперечисленным добром. Но mootools рекомендую обновить (в архиве 1.2beta, сейчас уже принявшая статус стабильной).

Пара слов о самом плагине. Он умеет:

  • Осуществлять AJAX-запросы и выводить результат. Красиво выводить )
  • Клонировать текстовые эелементы страницы .
  • Подгружать контента с других сайтов в IFrame.
  • Показывать оригинальные изображения во всплывающем окне.
  • И даже подгружать видео с Youtube все в том же симпатичном всплывающем окошке.

Все эти красивости вы можете потестировать на офсайте плагина. А мы займемся все-таки новостями.)

Итак, подключаем скрипты и CSS. Удобнее всего это сделать в файле шаблона. Первоначально в папке шаблона создаем папку js, куда складываем файлы .js, .css и две картинки.
Перед закрывающим </head> добавляем:

1
2
3
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/mootools-trunk.js"></script>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/SqueezeBox.js"></script>
<link href="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/SqueezeBox.css" rel="stylesheet" type="text/css" />

Далее, добавляем такой обработчик:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
window.addEvent('domready', function() {
    SqueezeBox.assign($$('a[rel=boxed]'), {
        size: {x: 400, y: 400},
        ajaxOptions: {
            method: 'get'
        }
    });

});
</script>

Данный скрипт, как мы видим, ищет на странице ссылки с аттрибутом rel=”boxed”, по нажатию на которые и будет происходить отработка плагина – вывод контента во всплывающем окне.
Непосредственно ссылка в коде страницы должна строиться по следующему принципу:

1
<a href="здесь_адрес_того_что_должно_выводится_во_всплывающем_окне" rel="boxed">Покажись!</a>

Теперь, когда подготовительный этап завершен, перейдем к коду модуля mod_latestnews.php. Как мы знаем, данный скрипт выбирает из БД заголовки новостей/статей и выводит их в виде ссылок на полную версию новости.

Примерно в 182 строке файла mod_latestnews.php находим следующую строчку:

1
<a href="<?php echo $link; ?>" class="latestnews<?php echo $moduleclass_sfx; ?>"><?php echo $row->title; ?></a>

Это и есть тот самый заголовок новости. Добавляем к тэгу аттрибут rel=”boxed”. Получаем:

1
<a  href="<?php echo $link; ?>" rel="boxed" class="latestnews<?php echo $moduleclass_sfx; ? >"><?php echo $row->title; ?></a>

Чуть выше находим:
$link = sefRelToAbs( ‘index.php?option=com_content&task=view&id=’. $row->id . $Itemid );
и меняем “index.php” на “index2.php”.

Готово.