Dnews - слайдер последних новостей из RSS ленты

jquery slider rss news

Приглянулся мне тут один слайдер ссылок. Называется он Dynamic News и предназначается для показа заголовков любой валидной rss ленты со всплывающим фрагментом текста (то есть статьи).

Ниже я дам готовое решение, а любознательные пользователи могут скачать скрипт со стилями и самостоятельно настроить этот слайдер.

Варианты использования в Blogger: динамический показ заголовков статей (фид определённого ярлыка) где-нибудь в футере или над статьями в html/javascript виджете блогспота. Правда на данный момент у меня лично Blogger отключил RSS, работают только Atom фиды.

Сначала смотрим демку, в которую вставил rss ленту социальной сети ↓
Скриншот:

Живое демо на тестовом блоге.

Установка в Blogger (почти аналогично и для других движков):
  1. Делаем бекап шаблона.
  2. Проверяем наличие jQuery, если нет, то ставим.
  3. В редакторе шаблона перед тегом </head> вставляем ↓

а) google feed API:
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
Ключ указывать теперь не требуется.

б) ссылку на скрипт dnews.js:
<script src="http://planeta.omg-linux.ru/docs/dnews/dnews.js" type="text/javascript"></script>

в) ссылку на стили dnews.css:
<link href="http://planeta.omg-linux.ru/docs/dnews/dnews.css" rel="stylesheet" type="text/css"></link>

г) скрипт с настройками слайдера Dnews:
<script type="text/javascript">
        google.load("feeds", "1");
        $(document).ready(function() {
            $('#snews').dnews({ feedurl: 'http://blogabloger.ru/rss', showdetail: true, entries:10, controls: false});
        });
</script>
Где:
google.load("feeds", "1") - это загружаемый модуль
feedurl: 'http://blogabloger.ru/rss' - ссылка на отображаемую rss ленту любого сайта
showdetail: true - всплывающее описание к заголовку поста в rss ленте
entries:10 - количество постов задействованных в слайдере
controls: false - панелька со стрелками прокрутки (false - отключена)
Дополнительно:
switchinterval - настрока пролистывания заголовков постов из rss ленты в милисекундах (по умолчанию - 5000)
controlsalwaysvisible - прятать (false) или не прятать (true) панельку со стрелками прокрутки

И последний момент:
нужно создать html/javascript виджет в админке Blogger'а и засунуть туда следующий html код:
<div id="containeraq">
<div class="demo">
<div class="news-wrapper" id="snews">
<div class="news">
</div>
</div>
</div>
</div>

Настоятельно рекомендую скрипт dnews.js и стили dnews.css переложить на собственный хостинг, например, на Dropbox.

Внешний вид.
Редактируем файл dnews.css

Всплывающее описание.
Редактируем файл dnews.js, где в строке:
if (description.length > 50) description = description.substr(0, 50);
50 означает количество символов в описании. Разумеется, с увеличением числа знаков, придётся увеличить и чёрную область для них.

Источник RSS Driven Dynamic jQuery News Slider Plugin: Dynamic News.

2 комментария:

  1. Нет, не отображает. Даже чисто внешне ему негде их показывать. Я прописал ограничивающий контейнер.
    Для картинок нужно нечто другое.

    ОтветитьУдалить