/*
BANNER ROTATOR PLUGIN
This was developed by BEACON9 (http://beacon9.ca).
It is an open source jQuery plugin which is available for free download from our site.
You have our full permission to use this for whatever you want, just keep this notice at the top of the script
AND let us know how you use it.
to use this script you will need jquery
include it in the part of your site from Google (e.g. )
then underneath it call the plugin like this...
*/
function bannerRotator(selector, scrollTime, pauseTime, nav){
$(selector+" li:first").css("display", "block"); //show the first list item
var count = $(selector+" li").size(); //get total number of list items
if(count > 1){ //dont do anything if there is only one list item.
if(scrollTime == null){ var scrollTime=500; } //default scroll time (length of transition)
if(pauseTime== null){ var pauseTime=5000; } //default pause time (how long to hold the image between transitions)
$(selector+" li").each(function( intIndex ){ $(this).attr('rel', (intIndex+1)); }); //add the list position to the each of the items
if(nav != null){
var i = 1;
$(selector).append(""); //create navigation buttons
while(i <= count){
if(i == $(selector+" li:visible").attr('rel')){ //if its the nav item that belongs to the visible image, mark it as the active nav item
$('#bannerNav').append(""+i+" ");
}
else{
$('#bannerNav').append(""+i+" ");
}
i++;
}
$("#bannerNav a").click(function () { //handle navigation by clicking nav items
$("#bannerNav a.active").removeClass('active');
$(this).addClass('active'); //move the active nav item to this item
var currentClassName = $(selector+" li:visible").attr('rel');
var nextClassName = $(this).attr('rel');
var storedTimeoutID = $("#bannerNav").attr('timeoutID');
if( nextClassName != currentClassName ){ //only change images if they clicked on a new item (not the one they are viewing)
$(selector+" li:visible").fadeOut(scrollTime);
$(selector+" li[rel="+nextClassName+"]").fadeIn(scrollTime);
}
return false;
});
}
pauseTime = $(selector+" li:visible").attr('displayTime');
var timeout = setTimeout(function(){
scrollImages(count, selector, scrollTime, pauseTime);
}, pauseTime);
$("#bannerNav").attr('timeoutID', timeout); //save the timeout id so we can cancel the loop later if a nav button is pressed
}
}
function scrollImages(count, selector, scrollTime, pauseTime){
currentClass = $(selector+" li:visible").attr('rel'); //get the list position of the current image
nextClass = $(selector+" li:visible").attr('rel'); //open a new variable for the next class
if (currentClass == count ){ nextClass=1; } //if you've reached the end of the images... start from number 1 again
else{ nextClass++; } //if not just add one to the last number
$(selector+" li[rel="+currentClass+"]").fadeOut(scrollTime); //fade out old image
$("#bannerNav a.active").removeClass('active'); //remove active class from our nav
$(selector+" li[rel="+nextClass+"]").fadeIn(scrollTime); //fade in new image
$("#bannerNav a[rel="+nextClass+"]").addClass('active'); //add new active class to the next nav item
pauseTime = $(selector+" li[rel="+nextClass+"]").attr('displayTime');
var timeout = setTimeout(function(){
scrollImages(count, selector, scrollTime, pauseTime); }, pauseTime); //scroll the banners again after waiting for pauseTime
$("#bannerNav").attr('timeoutID', timeout); //save the timeout id so we can cancel the loop later if a nav button is pressed
}