Lightbox открытие изображений в Mosets Tree 2.1

Рассмотрим интеграцию библиотеки Slimbox для осуществления эффекта Lightbox открытия изображений. Для нетерпеливых можно посмотреть как это будет выглядеть на сайте JED. Все действия будут проводиться на стандартном шаблоне M2.

Приступим:
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');