jQuery AdRotator like ASP.NET AdRotator Control

ASP.NET AdRotator control is a useful to randomly display advertisements on the page. But asp.net AdRotator control only display adv when page is refresh. In this article i describe how to create AdRotator control using jQuery without adding asp.net Adrotator control and it refresh Adv at interval time no need to refresh the page. Using jQuery you have to just pass only three parameters intervalTime,
xmlFileName and keywords.

Following steps are used to create jQuery AdRotator

Step1 : Here i am using same xml file which is used by asp.net AdRotator control. But i have changed little bit in the xml file. Here i have add "Keywords" as a attribute of the tag and also remove tag from the tag. So create one xml file say "AR.xml" file using following xml.


<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
<Ad Keyword="big">
<ImageUrl>image/AR1.jpg</ImageUrl>
<NavigateUrl>http://www.google.com</NavigateUrl>
<AlternateText>ASP.NET MVC 1.0 Quickly</AlternateText>
</Ad>
<Ad Keyword="small">
<ImageUrl>image/AR2.jpg</ImageUrl>
<NavigateUrl>http://www.yahoo.com</NavigateUrl>
<AlternateText>ASP.NET 3.5 Social Networking</AlternateText>
</Ad>
<Ad Keyword="small">
<ImageUrl>image/AR3.jpg</ImageUrl>
<NavigateUrl>http://www.live.com</NavigateUrl>
<AlternateText>ASP.NET 3.5 Application Architecture</AlternateText>
</Ad>
</Advertisements>


Step 2: Then add following four script file in "js" folder and refrence this four file in your page


<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.xml2json.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/AR.js"></script>


Step 3: Here i have create two diffrent way to display Adv
1) Without using metadata
2) Using metadata

1) Without using metadata

Step 1: In without using metadata you have to pass three parameter that is intervalTime,xmlFileName and keywords in the javascript block.Add one javscript block in the header section after adding four javascript refrence file.


<script type="text/javascript">
$(document).ready(function () {
$("#ARDiv").adrotator({ intervalTime: 10000, xmlFileName: 'AR.xml', keywords: 'small' });
});

Step 2: Now add one div tag between the body tag and give id "ARDiv" to that tag


<div id="ARDiv"></div>


Step 3: Now run the page and see the result after 10 second Adv image will be changed and only display those Adv image which have keywords "small"

1) Using metadata

Step 1: In using metadata you have to pass three parameter that is intervalTime, xmlFileName and keywords not in the javascript block but you have to pass tree paramter to div tag this way and add this div tag between body tag.


<div id="ARDiv1" class="{ intervalTime: 10000, xmlFileName: 'AR.xml', keywords: 'small' }"></div>


Step 2: Now add one javscript block in the header section


<script type="text/javascript">
$(document).ready(function () {
$("#ARDiv1").adrotator();
});
</script>


Step 3: Now run the page and see the result after 10 second Adv image will be changed and only display those Adv image which have keywords "small"



Here i am just do simple way. But your suggestion give me better idea to improve this script.
You can download code from here.