0 Пользователей и 1 Гость просматривают эту тему.
  • 1 Ответов
  • 1887 Просмотров
*

ma1efic

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

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

Реализация: Будем прикручивать эффект слайдера на готовый модуль показа последних комментариев - 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 (верхний модуль "Отзывы" в правой боковой колонке).
*

GWork

  • Осваиваюсь на форуме
  • 123
  • 1
Сайт не работает.
Для J3 сработает?
********************
Работает.
« Последнее редактирование: 04.04.2017, 12:58:53 от GWork »
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Выделить цепочку комментариев

Автор dimon7772

Ответов: 0
Просмотров: 211
Последний ответ 27.12.2016, 18:35:06
от dimon7772
Вывести счетчик комментариев в mod_6news

Автор burano

Ответов: 0
Просмотров: 363
Последний ответ 05.11.2016, 02:35:33
от burano
Как убрать наложение "Обновить список комментариев"?

Автор alexanderuss

Ответов: 15
Просмотров: 741
Последний ответ 26.02.2016, 12:42:15
от Taatshi
Свечение формы комментариев

Автор svet0chka

Ответов: 4
Просмотров: 558
Последний ответ 07.01.2016, 19:08:16
от Sulpher
Вывод счетчика комментариев Jcomments в определенном месте шаблона материала

Автор aleksandrozz

Ответов: 12
Просмотров: 3212
Последний ответ 09.12.2015, 10:23:22
от 4ecHOk