Вверх

Блог
RSS лента

Lightbox эфект в Mosets Tree 2.1 галерее

Vape Shop Эко Заправка

Рассмотрим интеграцию библиотеки 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" для подключения нашей библиотеки и файла стилей. После строк:

  1. $prevar .= "//--></script>";
  2. $document->addCustomTag($prevar);

добавляем:

  1. $document->addCustomTag('<script type="text/javascript" src="'.$mtconf->getjconf('live_site').'/components/com_mtree/templates/m2/js/slimbox.js"></script>');
  2. $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", найдём в нём код:

  1. <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
  2.                 echo $this->jconf['live_site'] . $this->mtconf['relative_path_to_listing_small_image'] . $image->filename;
  3.          ?>" img="" /></a></div>

и заменяем на:

  1. <div class="thumbnail-left">
  2.         <a href="<?php echo $this->jconf['live_site'] . $this->mtconf['relative_path_to_listing_medium_image'] . $image->filename; ?>" rel="lightbox-cats">
  3.                 <img src="<?php echo $this->jconf['live_site'] . $this->mtconf['relative_path_to_listing_small_image'] . $image->filename; ?>" alt="" />
  4.         </a>
  5. </div>

Если красивое открытие отображение не работает, то возможно у вас не подключен MooTools, для этого необходимо перед добавлением строк, описанных в пункте 3 добавить строку:

JHTML::_('behavior.mootools');

пример взята с: http://joomlacity.net/blog/i_am_clever/96.html

Ваша оценка: Пусто Средняя: 5 (1 голос)
Главная | Портфолио | Услуги | Контакты | Блог