Общее название «слайд-шоу».Вот класс.Это зависит от MooTools
URL: http://sydney.edu.au/scripts/3.2.0/slideshow.js?v=20110627
/* USWT build r3.2.0 - slideshow.js - 2011-06-17 16:56:38 EST - !!! DO NOT MODIFY !!! */
var version = "v3.2.0 Distributable Release - 10/12/2010";
var SlideshowInstances = [];
var DocumentLoad = new Date();
$(window).addEvent("domload", function () {
DocumentLoad = new Date()
});
var Slideshow = new Class({
Implements: [Options, Events],
options: {
timer: 5,
delay: 0,
order: "random",
startAtZero: false,
loop: true,
offset: [0, 0],
loadStyle: null,
displayErrors: false,
quickStart: false,
debug: false,
animation: {
method: Fx.Tween,
properties: ["opacity", 0, 1],
transition: "linear",
duration: 2
}
},
images: [],
currentImage: null,
nextImage: null,
imagesRandomised: [],
currentEl: null,
previousEl: null,
running: false,
started: false,
nextTimer: null,
beginLoadTime: null,
loadTime: 0,
injected: false,
error: false,
load: function (b, a) {
this.beginLoadTime = new Date();
(new Request({
url: b,
onSuccess: function (k, f) {
try {
var d = f.getElementsByTagName("gallery")[0];
if (!d) {
this.fireEvent("loadError", f, k);
this.__displayError("Failed to load slideshow (malformed configuration file [gallery]).");
return
}
var c = [];
var j = d.getElementsByTagName("image");
if (j.length == 0) {
this.fireEvent("loadError", f, k);
this.__displayError("Failed to load slideshow (malformed configuration file [images]).");
return
}
for (var h = 0; h < j.length; h++) {
c.push({
src: j[h].getAttribute("path"),
duration: j[h].getAttribute("time")
})
}
var e = {
timer: parseInt(d.getAttribute("timer")),
delay: parseInt(d.getAttribute("delay")),
order: d.getAttribute("order"),
startAtZero: (d.getAttribute("startAtZero") == "yes"),
fadeTime: parseInt(d.getAttribute("fadetime")),
loop: (d.getAttribute("looping") == "yes"),
offset: [parseInt(d.getAttribute("xpos")), parseInt(d.getAttribute("ypos"))]
};
if (isNaN(e.timer)) {
delete e.timer
}
if (isNaN(e.delay)) {
delete e.delay
}
if (isNaN(e.fadeTime)) {
delete e.fadeTime
}
if (isNaN(e.offset[0])) {
e.offset[0] = 0
}
if (isNaN(e.offset[1])) {
e.offset[1] = 0
}
if (!e.delay) {
e.delay = e.timer
}
if (typeof (e.fadeTime) != undefined) {
this.options.animation.duration = e.fadeTime;
delete e.fadeTime
}
this.setOptions(e);
this.setImages(c);
this.loadTime = new Date() - this.beginLoadTime;
if (a) {
this.start()
}
this.fireEvent("load")
} catch (g) {
this.__displayError(g.name + ": " + g.message)
}
}.bind(this),
onFailure: function () {
this.fireEvent("loadError");
this.__displayError("Failed to load slideshow (unable to load configuration).")
}.bind(this)
})).get()
},
initialize: function (d, b, a) {
this.setOptions(b);
this.setImages(a);
var c = {
"class": "slide",
styles: {
"background-position": this.options.offset[1] + "px " + this.options.offset[0] + "px",
"background-repeat": "no-repeat"
}
};
this.target = d;
this.foreground = new Element("div", c);
this.background = new Element("div", c);
this.setAnimation(this.options.animation.method, this.options.animation.properties, this.options.animation.transition);
if (this.options.images) {
this.setImages(this.options.images);
delete b.images
}
SlideshowInstances.push(this)
},
getDimensions: function () {
return this.dimensions
},
setAnimation: function (d, a, c) {
var b = new d(this.foreground, {
transition: c ? c : "linear",
duration: (this.options.animation.duration * 1000),
onComplete: function () {
if (!this.running) {
return
}
this.currentImage = this.nextImage;
this.fireEvent("imageChanged", this.currentImage);
var e = this.__selectNext();
this.background.setStyle("background-image", "url(" + this.images[this.currentImage].src + ")");
if (!e) {
this.stop.delay(this.images[this.currentImage].duration * 1000, this)
} else {
this.nextTimer = this.next.delay(this.images[this.currentImage].duration * 1000, this)
}
}.bind(this)
});
this.__animationStart = b.start.pass(a, b);
this.__animation = b
},
start: function () {
if (this.error) {
return
}
this.__inject();
this.running = true;
var a = $(this.target).getStyle("background-image");
if (!this.started && this.currentImage == null && a) {
var b = a.match(/^url\((?:'|")?(?:\.\/)?([^"']*)(?:'|")?\)$/i);
if (b) {
var c = b[1];
this.images.each(function (e, f) {
if (c.endsWith(e.src.replace(/^\.\//, ""))) {
this.currentImage = f;
this.__selectNext();
return
}
}.bind(this))
}
}
if (this.currentImage == null) {
this.__selectNext(-1)
}
if (this.nextTimer != null) {
clearTimeout(this.nextTimer);
this.nextTimer = null
}
if (this.currentImage == null || this.options.quickStart) {
this.nextTimer = this.next.delay(50, this)
} else {
var d = Math.max((this.images[this.currentImage].duration * 1000) - (new Date() - DocumentLoad), 50);
this.nextTimer = this.next.delay(d, this)
}
},
stop: function () {
if (!this.running) {
return
}
this.running = false;
this.fireEvent("stop")
},
reset: function () {
this.currentImage = null;
this.nextImage = null;
this.imagesRandomised = null;
this.started = false;
this.foreground.setStyle("background-image", "none");
this.background.setStyle("background-image", "none")
},
setImages: function (a) {
if (this.running) {
throw "Can't change images while the slideshow is running."
}
if (!a) {
return
}
var b = this.options.timer;
this.images = a.map(function (c) {
if (typeOf(c) == "object") {
return {
loaded: false,
loading: false,
valid: true,
src: c.src,
duration: (c.duration ? c.duration : b)
}
} else {
return {
loaded: false,
loading: false,
valid: true,
src: c,
duration: b
}
}
});
this.imagesRandomised = null;
this.currentImage = null;
this.nextImage = null
},
preload: function () {
if (this.error) {
return
}
var a = 0;
this.images.each(function (b, c) {
this.__loadImage(c)
}.bind(this))
},
next: function () {
if (!this.running) {
this.nextTimer = null;
return
}
if (this.images.length == 0) {
throw "Cannot run an empty slideshow."
}
if (!this.images[this.nextImage].loaded) {
if (!this.images[this.nextImage].valid) {
this.__selectNext()
}
this.nextTimer = this.next.delay(100, this);
return
}
if (!this.started) {
this.fireEvent("start");
this.started = true
}
this.fireEvent("imageChanging", [this.currentImage, this.nextImage]);
this.foreground.setStyle.delay((1000 / this.__animation.options.fps) + 10, this.foreground, ["background-image", "url(" + this.images[this.nextImage].src + ")"]);
this.__animationStart()
},
__loadImage: function (a) {
if (this.images[a].loading || this.images[a].loaded || !this.images[a].valid) {
return
}
var b = new Image(1, 1);
this.images[a].loading = true;
b.onerror = function () {
this.images[a].valid = false;
this.images[a].loading = false;
this.fireEvent("imageLoadError", a)
}.bind(this);
b.onload = function () {
this.images[a].loaded = true;
this.images[a].loading = false;
var c = 0;
this.images.each(function (d) {
if (d.loaded) {
c++
}
});
this.fireEvent("imageLoaded", a, c / this.images.length)
}.bind(this);
b.src = this.images[a].src
},
__selectNext: function (a) {
if (a == null) {
a = this.currentImage
}
if (this.options.order == "random") {
if (!this.imagesRandomised || this.imagesRandomised.length == 0) {
this.imagesRandomised = [];
this.images.length.times(function (b) {
this.imagesRandomised[b] = b
}, this);
this.imagesRandomised.splice(this.currentImage, 1);
this.imagesRandomised.shuffle()
}
this.nextImage = this.imagesRandomised.pop()
} else {
if (a + 1 < this.images.length) {
this.nextImage = a + 1
} else {
if (this.options.loop) {
this.nextImage = 0
} else {
return false
}
}
}
this.__loadImage(this.nextImage);
if (!this.images[this.nextImage].valid) {
if (!this.images.some(function (b) {
return b.valid
})) {
this.__displayError("Failed to load images.");
this.stop();
return
}
return this.__selectNext(this.nextImage)
}
return true
},
__inject: function () {
if (this.injected) {
return
}
this.injected = true;
this.dimensions = $(this.target).getCoordinates();
var a = {
width: this.dimensions.width,
height: this.dimensions.height
};
this.background.setStyles(a);
this.foreground.setStyles(a);
$(this.target).adopt(this.background.adopt(this.foreground));
if (typeOf(this.options.loadStyle) == "string") {
$(this.target).addClass(this.options.loadStyle)
} else {
if (typeOf(this.options.loadStyle) == "object") {
$(this.target).setStyles(this.options.loadStyle)
}
}
},
__displayError: function (a) {
this.error = true;
if (!this.options.displayErrors) {
if (this.options.debug && typeOf(console) != "undefined" && console.log) {
console.log(a)
}
return
}
this.running = false;
if (this.nextTimer == null) {
clearTimeout(this.nextTimer);
this.nextTimer = null
}
if (typeOf(this.options.loadStyle) == "string") {
$(this.target).removeClass(this.options.loadStyle)
}
$(this.target).empty().setStyle("color", "#f00").appendText(a)
},
__debug: function () {
if (typeof console == "undefined") {
return
}
console.log("Slideshow with ", this.images.length, " images");
this.images.each(function (a) {
console.log("Image: ", a.src, " " + (a.valid ? "valid" : "invalid"), " " + (a.loaded ? "loaded" : "not loaded"))
});
if (this.running) {
console.log("The slideshow is running")
}
if (this.currentImage != null) {
console.log("Currently showing image: ", this.images[this.currentImage].src)
} else {
console.log("Not showing an image")
}
if (this.nextImage != null) {
console.log("Next image: ", this.images[this.nextImage].src)
} else {
console.log("No next image")
}
if (this.loadTime > 0) {
console.log("Loaded XML settings in: ", this.loadTime, "ms")
}
}
});
function loadSlideshow(d, c, b) {
var a = new Slideshow(d, b);
a.load(c, true);
return a
}
function slideshowDebug() {
SlideshowInstances.each(function (a) {
if (a) {
a.__debug()
}
})
};