Начинающим джумловодам, вебмастерам и т.п. на заметку.
Задача: Сделать модуль, в котором последние комментарии будут отображаться не в виде стандартного списка, а слайдером - по одному комментарию на слайде.
Реализация: Будем прикручивать эффект слайдера на готовый модуль показа последних комментариев - 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 (верхний модуль "Отзывы" в правой боковой колонке).
11.03.2021, 17:19:50