jQuery Flash Banner rotator
I just ran into some legacy code that creates a flash banner rotator similar to my own 100% flash based solution and I thought I’d share it.
Note that the below code – apart from jQuery – also uses the scrollable script from the flowplayer guys.
So we have one main big area where the flash banner shows and and area to the right where we have a list of thumbnails that when clicked will show the corresponding banner in the big area.
If no user action is taken we also need to have a small marker slide to the next menu item at certain time intervals. This will trigger a click on the thumbnail in question.
The effect can be seen on the poker site in question. Note that if you check the source there it will look different from below because the below code has been cleaned up a bit during my task of revamping and relaunching the site.
function after_click(obj) {
var ldir = "/diamondbet/swf/loader.swf";
var updir = "/file_uploads/";
var inHTML = '<object width="806" height="312"><param name="movie" value="'+ldir+'?meSwf='+updir
+ jQuery(obj).attr('rel')
+ "&meUrl="
+ jQuery(obj).attr('link')
+ "&meTarget="
+ jQuery(obj).attr('linkTarget')
+ '\"><param name="wmode" value="window"><embed wmode="window" bgcolor="#000000" src="'+ldir+'?meSwf='+updir
+ jQuery(obj).attr('rel')
+ "&meUrl="
+ jQuery(obj).attr('link')
+ "&meTarget="
+ jQuery(obj).attr('linkTarget')
+ '" width="806" height="312"></embed></object>';
var itemNum = (jQuery(obj).prevAll().size()) - 1;
jQuery(".tabslider").html("");
jQuery(".tabslider").html(inHTML);
currentItem = itemNum;
nextItem = currentItem;
if (currentItem == (jQuery(".tab_item").size()))
nextItem = 0;
intInterval = window.clearInterval(intInterval);
intInterval = window.setInterval('jQuery(".tab_item:eq("+nextItem+")").trigger("click")', 10000);
}
var TabbedContent = {
init : function() {
jQuery(".tab_item").click(function() {
var background = jQuery(this).parent().find(".moving_bg");
jQuery(background).stop().animate({
top : jQuery(this).position()['top']
}, {
duration : 300
});
TabbedContent.slideContent(jQuery(this));
after_click(jQuery(this));
});
},
slideContent : function(obj) {}
}
jQuery(document).ready(function() {
TabbedContent.init();
var randItem = Math.floor(Math.random() * cntItems);
currentItem = randItem;
nextItem = currentItem + 1;
jQuery(".tab_item:eq(" + currentItem + ")").trigger("click")
});
var intInterval;
var currentItem = 0;
var nextItem = 1;
var cntItems = jQuery(".tab_item").size();
var height = jQuery(".tabs").height() / cntItems;
jQuery("#moving_button").height(height);
jQuery(".tab_item").height(height);
jQuery("#moving_button").css("top", "0px");
jQuery("#moving_button").css("width", "2px");So we start with calling TabbedContent’s init() function (we’ll get to that one in a bit). Next we figure out which banner/item we should start with showing by calling Math.random and multiplying with the number of items we want to rotate through. That number has in turn been set by the jQuery(“.tab_item”).size() call. Finally we trigger a click on the tab_item/menu item.
The init() function starts with binding click callbacks to all the menu/tab items. When a click is registered we move/animate a div with id moving_bg to the clicked item, it all happens during 300ms. We also call after_click() which will insert the banner HTML in question in the big area (at the moment I haven’t had time to check why this isn’t being done through jQuery.flash or swfObject).
The rest of the code in after_click() has to do with setting up the slide to the next item, if we’re on the last item in the menu we need to set the first item as the next item to slide to. We finally set the next slide to happen in 10s.
Apart from the explicit HTML generation I thought the above solution quite beautiful for handling a quite complex problem.
Related Posts
Tags: banner, flash, Javascript, jquery