BBC News-Like Website Ticker Plugin with jQuery - News Ticker

News Ticker is a lightweight jQuery plugin inspired by BBC news website ticker that allows you to create a flexiable and cross-browser news ticker widget with pause, play, next and previous controls.

See also:

• Tumblr News Ticker Widget with jQuery
• Text Scrolling Plugin for jQuery - Marquee

Features:

• Lightweight and easy to use
• Support for multiple tickers per page
• Supports right-to-left languages
• support for loading content via an RSS feed
• An optional fade effect between items
• Fully customizable via CSS

How to use it:

1. Include jQuery library and jQuery News Ticker on the page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="includes/jquery.ticker.js" type="text/javascript"></script>

2. Include jQuery News Ticker CSS to style you news ticker

<link href="styles/ticker-style.css" rel="stylesheet" type="text/css" />

3. The HTML

<ul id="js-news" class="js-hidden">
<li class="news-item">jQuery News Ticker Item 1</li>
<li class="news-item">jQuery News Ticker Item 2</li>
<li class="news-item">jQuery News Ticker Item 3</li>
...
</ul>

4. Call the plugin with options

<script type="text/javascript">
    $(function () {
        $('#js-news').ticker({
            speed: 0.10,
            htmlFeed: false,
            fadeInSpeed: 600,
            titleText: 'Latest News'
        });
    });
</script>

5. More options

$(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
    );
});

---

This awesome jQuery plugin is developed by rhodimus. For more Advanced Usages, please check the demo page or visit the official website.