Форум русской поддержки Joomla!® CMS
08.12.2016, 18:19:05 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1]   Вниз
  Добавить закладку  |  Печать  
Автор

Модуль в виде слайдера последних комментариев

 (Прочитано 1369 раз)
0 Пользователей и 1 Гость смотрят эту тему.
ma1efic
Осваиваюсь на форуме
***

Репутация: +4/-0
Offline Offline

Пол: Мужской
Сообщений: 39



« : 14.04.2015, 16:30:49 »

Начинающим джумловодам, вебмастерам и т.п. на заметку.

Задача: Сделать модуль, в котором последние комментарии будут отображаться не в виде стандартного списка, а слайдером - по одному комментарию на слайде.

Реализация: Будем прикручивать эффект слайдера на готовый модуль показа последних комментариев - jcomments latest.

Начальные параметры сайта и используемых компонентов:

  • Сайт на Joomla 2.5.9
  • Давно была установлена и настроена JComments 2.3.0
  • Для решения задачи установлен модуль JComments Latest 3.0.3

Процесс:

1) Устанавливаем на сайт модуль JComments Latest, выводим его в нужную позицию на сайте, настраиваем стили и конфигурацию, чтобы в конечном виде комментарий отображался как вам нужно.

2) Подключаем на сайт jQuery (я использовал версию 1.7.2). Можно подключать как со своего сайта, предварительно скачав библиотеку, или использовать внешние источники.

Пример:
Код:
<script src="http://balkonoff.com/templates/yougrids/src/jquery-1.7.2.min.js" type="text/javascript" ></script>

3) в файл /modules/mod_jcomments_latest/tmpl/default.php вставляем тег section для идентификации комментария. В строку 6 вставляем <section id="fade"> перед началом маркированного списка ul.

Фрагмент:
Код:
<?php
// no direct access
defined('_JEXEC') or die;
?>
<?php if (!empty($list)) :?>
<section id="fade">
<ul class="jcomments-latest<?php echo $params->get('moduleclass_sfx'); ?>">
<?php if ($grouped) : ?>

По окончании маркированного списка закрываем тег </section> (у меня это 109 строка)

Фрагмент:
Код:
<?php endif; ?>
</ul>
</section>

3) Создаем файл со скриптом слайдера. Для этого создаем файл js на сайте с содержимым:

Код:
jQuery(document).ready(function($){
setInterval(function(){
jQuery("#fade ul").append(jQuery("#fade ul > li:first-child"));
jQuery("#fade ul > li:first-child").Remove();
}, 7000);
});

В файле 7000 - это продолжительность эффекта в мс.

Вставляем код в head после библиотеки jQuery. Пример:
Код:
<script src="http://balkonoff.com/templates/yougrids/src/slider_comments.js" type="text/javascript" ></script>

4) Вставляем в файл CSS основные стили:
Код:
/* otzyvy slider */
#fade {
  height: 200px; /* общая высота блока, если не указывать, то будет автоматически подстраиваться под высоту комментария */
  overflow: hidden;
}
#fade ul > li{
  display:none;
}
#fade ul > li:first-child{
  display:block;
  opacity:1;  /* make things invisible upon start */
  -webkit-animation: fasdes 2.2s;
  -moz-animation: fasdes 2.2s;
  animation:  fasdes 2.2s;
  }
 @-webkit-keyframes fasdes {
     0% {
      opacity:0;
     }
     100% {
      opacity:1;
        }
    }
   @-moz-keyframes fasdes {
     0% {
      opacity:0;
     }
     100% {
      opacity:1;
        }
    }
   @keyframes fasdes {
     0% {
      opacity:0;
     }
    100% {
      opacity:1;
        }
}

Эффект затухания сделан стилями, так что можете в общем-то туда писать любые нужные вам эффекты.

Пример, как выглядит конечный результат: http://balkonoff.com (верхний модуль "Отзывы" в правой боковой колонке).
Записан
Страниц: [1]   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet