function AblImageRotator(container, options) { var _self = this; this.$container = (container instanceof jQuery) ? container : $(container); this.$img = null; this.index = 0; this.isRunning = false; this.isAnimating = false; this.timer = null; this.params = { imageId: "", images: [], delay: 5000, fadeIn: 1000, fadeOut: 1000, width: 100, height: 100, alt: "", onImageChanging: null, onImageChanged: null }; $.extend(this.params, options); this.$img = $("img" + this.params.imageId, this.$container); this.$container.removeClass("running").addClass("stopped"); if (this.params.delay < 1) { $(".next", this.$container).click(function (evt) { evt.preventDefault(); _self.rotateImage(1, false) }); $(".previous", this.$container).click(function (evt) { evt.preventDefault(); _self.rotateImage(-1, false) }) } else { $(".play", this.$container).click(function (evt) { evt.preventDefault(); _self.play(1) }); $(".stop", this.$container).click(function (evt) { evt.preventDefault(); _self.stop() }) } if ((this.params.images) && (this.params.images.length)) { _self.loadImages() } } AblImageRotator.prototype.loadImages = function (images, autoPlay) { if (this.isRunning) { this.stop() } if (images) { this.params.images = images } this.noImages = this.params.images.length; this.preLoad = new Array(this.noImages); for (var i = 0; i < this.noImages; i++) { var img = this.params.images[i]; this.preLoad[i] = new Image(); this.preLoad[i].src = img.src; this.preLoad[i].width = img.width || this.params.width; this.preLoad[i].height = img.height || this.params.height; this.preLoad[i].alt = img.alt || this.params.alt } this.index = 0; if (autoPlay) { this.play() } }; AblImageRotator.prototype.dispose = function () { if (this.timer) { window.clearTimeout(this.timer); this.timer = null } this.$container.unbind(); this.$container = null; this.$img = null; this.preLoad = null }; AblImageRotator.prototype.rotateImage = function (step, noDelay, callback) { if (this.isAnimating) { return } this.isAnimating = true; var _self = this, args; this.$img.fadeOut((noDelay) ? 0 : this.params.fadeOut, function () { _self.index += step; if (_self.index >= _self.noImages) { _self.index = 0 } else if (_self.index < 0) { _self.index = _self.noImages - 1 } var img = _self.preLoad[_self.index]; _self.$img.attr({ src: img.src, width: img.width, height: img.height, alt: img.alt, title: img.alt }); args = { index: _self.index, noImages: _self.noImages, isFirst: (_self.index === 0), isLast: ((_self.index + 1) === _self.noImages) }; if (typeof _self.params.onImageChanging === "function") { _self.params.onImageChanging.apply(_self, [args]) } _self.$img.fadeIn(_self.params.fadeIn, function () { if ((_self.params.delay > 0) && (_self.isRunning)) { _self.timer = window.setTimeout(function () { _self.rotateImage(1, false) }, _self.params.delay) } _self.isAnimating = false; if (typeof _self.params.onImageChanged === "function") { _self.params.onImageChanged.apply(_self, [args]) } if (typeof callback === "function") { callback.apply(_self, [args]) } }) }) }; AblImageRotator.prototype.play = function (step, callback) { if (this.isRunning) { return } this.isRunning = true; this.$container.removeClass("stopped").addClass("running"); this.rotateImage(step || 0, true, callback) }; AblImageRotator.prototype.stop = function () { if (this.timer) { window.clearTimeout(this.timer); this.timer = null } this.isRunning = false; this.$container.removeClass("running").addClass("stopped") }; AblImageRotator.prototype.prev = function (callback) { this.rotateImage(-1, false, callback) }; AblImageRotator.prototype.next = function (callback) { this.rotateImage(1, false, callback) }; AblImageRotator.prototype.start = function () { var _self = this; this.isRunning = true; this.$container.removeClass("stopped").addClass("running"); this.index = 0; if (this.$img.attr("src")) { if (this.params.delay > 0) { this.timer = window.setTimeout(function () { _self.rotateImage(1, false) }, this.params.delay) } } else { this.rotateImage(0, true) } };