Skip to content

jQuery Plugin: Dynamic RSS Feed Slideshow

July 4, 2011

Few days back, I was thinking to develop a jQuery plugin. There are so many jQuery plugins such as Image sliders, Image gallery, Navigations, Lightbox viewer, etc. I was confused on what to develop, after a long time thinking, I have got a great idea. The plugin, I have decided to develop is “Dynamic RSS Feed Slideshow” and the intention is to display RSS news feed with some nice transition effects. If you have a idea to display your favorite news feed in your own website, then this is the right place to download. It is open source jQuery plugin, you can use this for developement and further enhancement and of course, this is my first jQuery plugin.

Dynamic RSS Feed Slideshow

 

How to Use?

Before using this, you should have a google api key of your website. It is very simple to get, Please visit http://code.google.com/apis/maps/signup.html and signin with your google account. It redirects to a api signup page, there enter your website URL, where you are going to implement this plugin. For example http://example.com (or) http://localhost, once you enter, it generates the api which looks like the below,


ABQIAAAAkGMwVXYXPd1ca9opxkmJeRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQ-135Pijwz1dke1QlhBlEzIQPfbQ

Once you done with this, open the “dynamic-rssfeed-slideshow.js” file and search for ‘api_key:’ and replace with the existing key. Since, I am fetching the news feeds using a Google API, It needs the above information.

Step 1 – Include the Script

Include the javascript files inside the of the HTML document.


<script type="text/javascript"  src="your_file_path/jquery-1.3.2.min.js" ></script>
<script type="text/javascript"  src="your_file_path/dynamic-rssfeed-slideshow.js" ></script>

Step 2 – Include the CSS

Include the style sheet inside the of the HTML document.


<link href="rssfeeds.css" type="text/css" rel="stylesheet" />

Step 3 – The HTML

It is mostly done. Add a ‘div’ tag which has ‘id’ (or) ‘class’ and a loading image inside it. This is how your HTML looks at the end.


<html>
	<head>
		<link href="rssfeeds.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript"  src="your_file_path/jquery-1.3.2.min.js" ></script>
		<script type="text/javascript"  src="your_file_path/dynamic-rssfeed-slideshow.js" ></script>
	</head>
	<body>
		<div id="rss_to_display"><img src="your_file_path/loading.gif" border="0" alt="Please wait, while loading the news feeds..."</div>
	</body>
</html>

Step 3 – Activate the Plugin

Activating it with the ‘id’ or ‘class’ that you have used in the div tag.


$('#rss_to_display').rss_slide_show({
rsslink: 'https://aravindtrue.wordpress.com/feed/', /* The RSS link which is needs to be displayed*/
limit: 10, /* The limit of the feeds */
effect: 'fade', /* The effect you need 'fade, slideHorz, slideVert, none' */
navigation: 1, /* 1 indicates display previous and next navigation but this provided as 0, the navigation wont be display. */
timer: 8000 /* The time interval to display the feeds. */
});

Thats it. You have done.

Advertisements
4 Comments
  1. innovatorengr permalink

    Neat Explanation..:)

  2. Thanks.. 🙂

  3. May be this blogs best post to date

  4. I do not disagree with this post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: