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.
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 is a PHP proxy available on the plug-in site 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.
The attached zip archive contains JS, CSS and HTML files.
Bookmark / Share
Subscribe
