XML banner fader in jQuery

XML banner fader in jQuery

Have big banners in your website?

Apply this plug-in to display these big banners in your website. This plug-in is an XML based, but in other words it is somewhat similar to the image slideshow viewers. This plug-in puts a fading set of banners on your page that can also be linked to other websites. Such banners can be placed on the top of the website. The animation provided is in the form of fade effect with the timing specified. The transitions between the images are soft and smooth without any visible lags. The window size is pre-defined and hence the image is fit inside the given space only. With such interesting features you can enhance the website viewing experience.

Demo of XML banners in jQuery

For Download ZIP of all files (123Kb)

Here’s the XML code.
[javascript]<gallery fade="500" ontime="5000">
<picture src="banners/banner1.jpg" href="http://www.google.com" target="_blank">
<picture src="banners/banner2.jpg" href="http://www.yahoo.com" target="_blank">
<picture src="banners/banner3.jpg" href="http://www.bing.com" target="_blank">

</picture></picture></picture></gallery> [/javascript]

Note: Some browsers change the above code for reasons unknown!

The main tag gallery defines the document. fade is the time a transition takes, and ontime is the time between transitions. Each picture tag has a src, href, and target. src is the same as an img tag src, and href and target are the same as an a tag attributes.

The HTML code is very simple.

[javascript]<div id="banner"><a id="banner_href" href="#"><img id="banner_image" src="banners/banner1.jpg" alt="Banner Image"></a></div>[/javascript]

The source of the main image tag is actually a fallback banner, you can use anything.

[javascript]@charset "utf-8";
/* CSS Document */

#banner{
width: 760px;
height: 250px;
position: relative;
}[/javascript]

The CSS for that is even simpler, just defining the size of the banner box. Each banner image should be the same size as the box defined.

position: relative is added so that controls can be added over the top of the banner.

I’ve added in the banner.js code for completeness, it’s commented on each line.

[javascript]// JavaScript Document

$(document).ready(function(){
xmldata=new Array(); //initialise array for XML data

fade=0; //time taken for transitions
ontime=0; //time between transitions
changenum=0; //current banner
changetot=0; //total banners

$("#banner").fadeTo(1,0); //fade out the fallback banner

$.ajax({ //get the XML data
url: "banners.xml", //URL to get the data from
success: function(data) { //if we succeed, set everything up. We don’t expect failure.
$(data).find("picture").each(function()
{
xmldata.push($(this)); //add item into array
});
changetot=xmldata.length; //get total length
ontime=eval($(data).find("gallery").attr("ontime")); //get fade time
fade=eval($(data).find("gallery").attr("fade")); //get time between fades

change_banner(changenum); //change banner for first banner

}
});
});

function change_banner(){

data=xmldata[changenum]; //get current banner XML object

img=$(data).attr("src"); //retrieve variables
href=$(data).attr("href");
target=$(data).attr("target");

$("#banner_href").attr("href",href); //change variables on HTML
$("#banner_href").attr("target",target);
$("#banner_image").attr("src",img);

changenum++; //increment banner value, this is executed BEFORE the callback as we already have the variables.
if(changenum>=changetot) //check for banner value bounds
changenum=0;

cache = document.createElement(‘img’); //create an image
cache.src = $(xmldata[changenum]).attr("src"); //pre-cache next image (means the browser will load it instantly)

$("#banner").fadeTo(fade,1).fadeTo(ontime,1).fadeTo(fade,0,change_banner); //fade banner in, then wait, then fade out and call back to this function.

}[/javascript]

When the document is ready, the jQuery hides the fallback banner, loads the XML using the ajax command, and on success it sets up an array of xml data snippets for each banner and the fade and transition time. On finished loading the XML, caches the next banner, increments the counter, then fades in the first banner, waits for a defined time, then fades out, and calls back to the same function to show the next one. This has the effect of using recursion to build a loop, which is very neat, though you can tie yourself in knots with recursion if you aren’t careful. The banners will be shown in the order they’re in the XML file.

Live Source

To get the version of the script integrated within a live template visit the website whose link is mentioned here: Boxedart.com

Interested? Want to keep yourselves updated with the latest JavaScripts and codes? Try this website a1javascripts.com for more jQuery, CSS and HTML5 techniques.

JQuery is a very powerful tool, the more you learn about, more will you be amazed what it is capable of. Stay with us for lot of upcoming articles, Guidelines with plenty of great tutorials, Resources, etc.

One Response to “XML banner fader in jQuery”

  1. Samantha says:

    I suggest adding a facebook like button for the blog!