A recent project of mine involved a website where the news feed was powered purely by RSS. To add some life to the news & events sections on the home page I created a slider that scrolls through the three latest entries using ‘the jFeed’ and ‘jQuery Flips’ plug-ins.

You can view a demo here, or head to the bottom to get the source code.

jQuery RSS Slider The script will loop through the latest 3 RSS entries

Step 1: The HTML

The HTML markup couldn’t be simpler. Copy and paste the following into your body tag and you are ready to add the JavaScript.

 <div class=”to-flips” id=”news”>     <h1>Latest News</h1>     <div class=”content”>         <div id=”latestnews”></div>     </div>     <div class=”flipnav”></div> </div>

The classes and ID’s used are:

  • ‘to-flips’ – The container DIV for the jQuery Flips plug-in
  • ‘news’ – The DIV jQuery Flips assigned as the slider
  • ‘content’ – The inner DIV for jQuery Flips. Mainly used for styling.
  • ‘latestnews’ – The DIV jFeed populates with the RSS feed
  • ‘flipnav’ – The DIV jQuery Flips populates with ‘next’ & ‘previous’ buttons.
  • ‘block’ – Used in the jFeed JavaScript, each block contains one RSS item

Step 2: Adding the CSS & JavaScript

There are several plug-ins available for jQuery that will parse RSS feeds, my personal favorite being jFeed. By default the jFeed script will only work with RSS feeds on the same domain, however there are numerous PHP proxy available if you need to parse an external file.

<link rel=”stylesheet” type=”text/css” href=”style.css” /> <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script> <script type=”text/javascript” src=”js/jquery.jfeed.pack.js”></script> <script type=”text/javascript” src=”js/jquery.flips.min.js”></script> <script type=”text/javascript”> jQuery(function() { jQuery.getFeed({     // RSS path must be local unless using a proxy     url: ‘rss/rss.xml’,     success: function(feed) {         var html = ”;         // Selects how many RSS items to parse         for(var i = 0; i < feed.items.length && i < 3; i++) {             var item = feed.items[i];             html += '<div class=block>'             // Gets the RSS link and title             + ‘<h3>’ + ‘<a href=”‘ + item.link + ‘”>’ + item.title             + ‘</a>’ + ‘</h3>’;             html += <div class=”grey”>’             // Gets the RSS pubDate             + item.updated             + ‘</div>’             // Gets the RSS description             + item.description             + ‘</div>’;         }         jQuery(‘#latestnews’).append(html);         // Adds the Flips element. The direction can left, top or bottom         $(‘#news’).flips( { autorun_delay:1000, direction: ‘right’});     }     }); }); </script>

A Word of Thanks

I’d like to say a quick thank you to Nick Dunnington for helping me iron out a couple of bugs in this.

Click here to download the source code

The attached zip archive contains JS, CSS and HTML files.

Related Posts

  1. Using Multiple Instances of jDiv
  2. Simple CSS Rollovers
  3. Using Flash as a background
Posted in All, Tutorials and tagged jQuery, jQuery News, jQuery RSS.