// S3 Slideshow Class function S3Slideshow(selector, pauseTime, transitionTime) { if (pauseTime == undefined) pauseTime = 5000; if (transitionTime == undefined) transitionTime = 1000; this.init(selector, pauseTime, transitionTime); } S3Slideshow.prototype = { // Declare slideshow variables currentItem: 0, // FUNCTIONS init: function(selector, pauseTime, transitionTime) { this.transitionTime = transitionTime; this.pauseTime = pauseTime; this.target = $(selector); this.images = $(selector + " #slideshowimages > img"); this.numItems = this.images.length; // Dynamically add divs for the slideshow toggling var div1 = this.target.attr("id") + "_slideshowContainer1"; var div2 = this.target.attr("id") + "_slideshowContainer2"; this.target.append($.create("div", {"id": div1, "style": "position:absolute;top:0;left:0;" }, [ "img", {}, [] ])); this.target.append($.create("div", {"id": div2, "style": "position:absolute;top:0;left:0;" }, [ "img", {}, [] ])); // Set a reference to the two divs internally this.div1 = this.target.find("div#" + div1); this.div2 = this.target.find("div#" + div2); // Set up the initial display state // Hide the 2 divs this.div1.hide(); this.div2.hide(); this.getActiveDiv().fadeIn(this.transitionTime); this.setActiveImage(this.images.eq(this.getCurrentItem()).attr("src")); this.swapActiveBanner(); if (this.numItems > 1) { this.start(); } }, start: function() { this.setTimer(); }, stop: function() { this.clearTimer(); }, next: function() { this.incrementItem(); this.transition(); }, prev: function() { this.decrementItem(); this.transition(); }, fadeOut: function() { this.swapActiveBanner(); this.getActiveDiv().fadeOut(this.transitionTime); }, transition: function() { this.fadeOut(); this.setInactiveImage(this.images.eq(this.getCurrentItem()).attr("src")); this.getInactiveDiv().fadeIn(this.transitionTime); }, goTo: function(index) { if (this.getCurrentItem() != (index - 1)) { this.stop(); this.setCurrentItem(index-1); this.transition(); } }, clearTimer: function() { if (this.timer != undefined) clearInterval(this.timer); }, setTimer: function() { this.timer = setInterval(this.delegate(this, this.next), this.pauseTime); }, decrementItem: function() { this.currentItem--; if (this.currentItem < 0) { this.currentItem = this.numItems - 1; } }, incrementItem: function() { this.currentItem++; if (this.currentItem >= this.numItems) { this.currentItem = 0; } }, setActiveImage: function(imgUrl) { this.getActiveDiv().find("img").attr("src", imgUrl); }, setInactiveImage: function(imgUrl) { this.getInactiveDiv().find("img").attr("src", imgUrl); }, setCurrentItem: function(index) { this.currentItem = index; }, getCurrentItem: function() { return this.currentItem; }, getActiveDiv: function() { return (this.getActiveBanner() == 1 ? this.div1 : this.div2); }, getInactiveDiv: function() { return (this.getActiveBanner() == 1 ? this.div2 : this.div1); }, getCurrentImage: function() { return this.images.eq(this.getCurrentItem()); }, getActiveBanner: function() { return this.activeBanner; }, swapActiveBanner: function() { this.activeBanner = this.activeBanner == 1 ? 2 : 1; }, // Delegate function for callbacks delegate: function ( that, thatMethod ) { return function() { return thatMethod.call(that); } } } var slideShow; $(document).ready(function() { slideShow = new S3Slideshow("div#banner:has(div#slideshowimages)",5000,600); });