Новостная бегущая строка для блога


Сегодня снова поговорим о плагинах jQuery, в частности, о довольном свежем релизе - jQuery News Ticker.
Это анимированная бегущая строка, и в отличии от многих ей подобных, jQuery News Ticker полностью настраивается, привязан к css и имеет много опций в запасе. С её помощью можно постить текущие и будущие анонсы, рекламу и (сами придумаете).

Не будем тратить время на болтологию, сразу покажу демо (вроде как работает во всех популярных браузерах):



Установка.
1) Сначала скачаем скрипт и таблицу стилей для этой строки. Это можно сделать со страницы разрботки плагина (качаете архив, прописываете в файле css путь к картинке с навигацией) или с моего сервера - скрипт + стили (картинка уже положена на хостинг пикасы и прописаны все пути).
В самом скрипте jquery.ticker.js поменяйте в titleText слово Latest или "Шо нового?" в моей версии. Там же можете поковыряться с настройками, но можно это сделать позднее.
Со стилями тоже придётся поработать, чтобы найти желанные цвета.
Скаченные стили и скрипт кладём на внешний хостинг, прописываем в <head></head> или в начало html виджета Blogger (разница между этими ситуациями подробно описана здесь).
Да, в блоге должна на этот момент стоять библиотека jQuery.

2) Теперь рассмотрим "настроечный скрипт", который можно туда же скопипастить, что и пути к предыдущим скриптам.
В самом простом исполнении он выглядит так:
<script type="text/javascript">
    $(function () {
        $('#js-news').ticker();
    });
</script>
Собственно, здесь нечего трогать, и настройки все работают по умолчанию, если вы не вмешивались в скрипт, который нужно было скачать в первом шаге этой статьи.

+ html код, в котором задётся текст новостей:

<div class="no-js" id="ticker-wrapper">
<ul class="js-hidden" id="js-news">
<li class="news-item"><a href="#">Первая новость.</a></li>
<li class="news-item"><a href="#">А за ней вторая новость.</a></li>
<li class="news-item"><a href="#">И третья новость. Дайте мне сорок ТИЦ!</a></li>
<li class="news-item"><a href="#">В Яндексе не всё спокойно.</a></li>
</ul>
</div>

На этом можно остановиться, плагин jQuery News Ticker будет работать.

Настройка.
Теперь вернёмся к настроечному скрипту и рассмотрим более тонкую настройку плагина jQuery News Ticker.
Все доступные опции для "настроечного скрипта" (подключать по этому образцу):
$(function () {
    $('#js-news').ticker(
        speed: 0.10,           // The speed of the reveal
        ajaxFeed: false,       // Populate jQuery News Ticker via a feed
        feedUrl: false,        // The URL of the feed
                        // MUST BE ON THE SAME DOMAIN AS THE TICKER
        feedType: 'xml',       // Currently only XML
        htmlFeed: true,        // Populate jQuery News Ticker via HTML
        debugMode: true,       // Show some helpful errors in the console or as alerts
                          // SHOULD BE SET TO FALSE FOR PRODUCTION SITES!
        controls: true,        // Whether or not to show the jQuery News Ticker controls
        titleText: 'Latest',   // To remove the title set this to an empty String
        displayType: 'reveal', // Animation type - current options are 'reveal' or 'fade'
        direction: 'ltr'       // Ticker direction - current options are 'ltr' or 'rtl'
        pauseOnItems: 2000,    // The pause on a news item before being replaced
        fadeInSpeed: 600,      // Speed of fade in animation
        fadeOutSpeed: 300      // Speed of fade out animation
    );
});
True - да
False - нет
speed: 0.10, // Скорость прокрутки текста
ajaxFeed: false, // Подключаем фид
feedUrl: false, // Url фида
// Должен быть на том же домене, что и блог.
feedType: 'xml', // Только XML
htmlFeed: true, // Подключаем фид, как HTML
debugMode: false, // Режим отладки
//
controls: true, // Разрешаем или нет кнопки контроля новостей
titleText: 'Latest', // Изменить слово Latest или "Шо нового" (в моём варианте)
displayType: 'reveal', // Тип анимации 'reveal' или 'fade'
direction: 'ltr' // Ориентация текста: слева-направо или наоборот - 'ltr' or 'rtl'
pauseOnItems: 2000, // Пауза между новостями
fadeInSpeed: 600, // Скорость появления анимации (feed in)
fadeOutSpeed: 300 // Скорость угасания анимации (feed out)


Пример. В бегущей строке мы хотим выводить новости с другого сайта посредством его rss ленты: 
<script type="text/javascript">
    $(function () {
        $('#js-news').ticker({
            htmlFeed: false,
            ajaxFeed: true,
            feedUrl: 'Вставить адрес rss ленты, например, http://example.com/rss.xml',
            feedType: 'xml'
        });
    });
</script>
Последнее малоактуально для Blogger даже с отключенной переадресацией в Feedburner, поскольку парсинг фида осуществляется лишь в том случае, когда фид и блог находятся на одном домене. В Blogger технически - это разные хосты.
  Теги: , ,

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

  1. Maxamuz29 октября 2011 г. в 21:58

    Извините, за глупый вопрос. А что значит выражение "Скаченные стили и скрипт кладём на внешний хостинг"? Как ни будь поподробнее можно?

    ОтветитьУдалить
  2. aldous30 октября 2011 г. в 01:54

    Заводите внешний хостинг. Это могут быть сайты гугл или хостеры, типа hostinger.ru.
    Кладёте туда скрипты и стили, и прописываете пути к ним перед тегом /head в своём шаблоне. Образец написания ссылок можете посмотреть на любом сайте, нажав правую кнопку мыши в фаерфоксе и выбрав "исходный код страницы). Ищите там файлы перед тегом /head с расширением .js и .css.
    Или в этой статье http://blogger.omg-linux.ru/2011/10/ystanovka-skriptov-i-stiley-b-blogger.htm, там где абзац начинается с таких же слов "Теперь кладём стили на хостинг и прописываем в шаблон перед тегом /head.

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

Подписаться на: Комментарии к сообщению (Atom)