Friday, February 25, 2011

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.

6 comments:

Seo online said...

I think its a great tutorial.
Medical billing company

Technology Blog

Pakistani music online

Seo services company

Seo services

Inbound Call centers

Online shopping in Pakistan

Dc Limousines

Limo in washington dc

Limo service in baltimore

Healthcare reviews

Bus charter dc

Php tutorials

Tutors online

Emr vendors

Unknown said...

Thanks for sharing useful article. Your way of describing very nice and easy to use.
Media buying houses | Media buying houses in Pakistan

Unknown said...

Amazing,... I was checking continuously this blog and I am impressed! Very useful information particularly the last part :) Thanks dude
Advertising agencies | Advertising agencies in Pakistan

Unknown said...

Very interesting thanks. I believe there's even more that could be on there! Keep it up
airport pickup w2
heathrow to w2
southend to w2

Unknown said...

The download link seems to no longer work. Is there a way to get the adrotator.zip file? Thanks!

El cameroonian said...

i think that this tutorial is very helful, but it can be better improved. For example, i am new in asp.net mvc but i don't know if this code can be used in asp.net mvc using javascript.Secondly, i have try to download js files, but can not be able to obtain AR.js and also, i don't know how i can do to obtain it.