Рассмотрим интеграцию библиотеки Slimbox для осуществления эффекта Lightbox открытия изображений.
В стандартной сборке изображение в галерее открываються в новом окне.
Приступим:
1) Скачаем библиотеку Slimbox для MooTools 1.11, на данный момент это Slimbox 1.58 (тыц).
2) Возьмём из архива два каталога «css» и «js» и закинем их в каталог "/components/com_mtree/templates/m2". Из каталога «js» удалим файл «mootools.js».
3) Откроем файл "/com_mtree/mtree.php" для подключения нашей библиотеки и файла стилей. После строк:
-
$prevar .= "//--></script>";
-
$document->addCustomTag($prevar);
добавляем:
-
$document->addCustomTag('<script type="text/javascript" src="'.$mtconf->getjconf('live_site').'/components/com_mtree/templates/m2/js/slimbox.js"></script>');
-
$document->addCustomTag('<link rel="stylesheet" href="'.$mtconf->getjconf('live_site').'/components/com_mtree/templates/m2/css/slimbox.css" type="text/css" media="screen" />');
4) Откроем файл "/components/com_mtree/templates/m2/sub_images.tpl.php", найдём в нём код:
-
<div class="thumbnail-left"><a href="<?php echo JRoute::_('index.php?option=com_mtree&task=viewimage&img_id=' . $image->id . '&Itemid=' . $this->Itemid); ?>"><img src="<?php
-
echo $this->jconf['live_site'] . $this->mtconf['relative_path_to_listing_small_image'] . $image->filename;
-
?>" img="" /></a></div>
и заменяем на:
-
<div class="thumbnail-left">
-
<a href="<?php echo $this->jconf['live_site'] . $this->mtconf['relative_path_to_listing_medium_image'] . $image->filename; ?>" rel="lightbox-cats">
-
<img src="<?php echo $this->jconf['live_site'] . $this->mtconf['relative_path_to_listing_small_image'] . $image->filename; ?>" alt="" />
-
</a>
-
</div>
Если красивое открытие отображение не работает, то возможно у вас не подключен MooTools, для этого необходимо перед добавлением строк, описанных в пункте 3 добавить строку:
JHTML::_('behavior.mootools');
пример взята с: http://joomlacity.net/blog/i_am_clever/96.html