Greetings everyone,
I´ve developed a script to make a slideshow using a holder and the images you need. Just place the images you need within a holder, pass the holder ID to the script and its done!
the parameters are:
holder - id of the holder
speed - change this number to increase/increase speed (lower = faster)
width - width of the holder / images within
height - height of the holder / images within
-
//////////////////////////////////////
-
// Romulo do Nascimento Ferreira //
-
// romulo.nf@gmail.com //
-
//////////////////////////////////////
-
-
function makeSlideShow(holder,speed,width,height) {
-
gallery = document.getElementById(holder)
-
gallery.style.width = width + "px"
-
gallery.style.height = height + "px"
-
gallery.style.cssFloat = "left"
-
this.alphaShow = 0
-
this.alphaFade = 100
-
this.currentImg = 0
-
this.animationSpeed = speed
-
this.images = gallery.getElementsByTagName("img")
-
this.galleryLength = this.images.length
-
-
for (x=0; x<this.galleryLength; x++) {
-
this.images[x].style.width = width + "px"
-
this.images[x].style.height = height + "px"
-
this.images[x].style.position = "absolute"
-
-
this.images[x].style.filter = "alpha(opacity=0)"
-
this.images[x].style.opacity = "0"
-
this.images[x].style.mozOpacity = "0"
-
}
-
-
var _this = this
-
var startShow = window.setInterval(function(){_this.engine()},this.animationSpeed*10)
-
}
-
-
makeSlideShow.prototype.engine = function() {
-
this.nextImage = this.currentImg + 1 < this.galleryLength ? this.currentImg + 1 : 0
-
-
this.images[this.currentImg].style.filter = "alpha(opacity=" + this.alphaFade + ")";
-
this.images[this.currentImg].style.opacity = this.alphaFade < 10? "0.0" + this.alphaFade : this.alphaFade >= 10 && this.alphaFade < 100 ? "0." + this.alphaFade : 1.0;
-
this.images[this.currentImg].style.mozOpacity = this.alphaFade < 10? "0.0" + this.alphaFade : this.alphaFade >= 10 && this.alphaFade < 100 ? "0." + this.alphaFade : 1.0;
-
-
this.images[this.nextImage].style.filter = "alpha(opacity=" + this.alphaShow + ")";
-
this.images[this.nextImage].style.opacity = this.alphaShow < 10? "0.0" + this.alphaShow : this.alphaShow >= 10 && this.alphaShow < 100 ? "0." + this.alphaShow : 1.0;
-
this.images[this.nextImage].style.mozOpacity = this.alphaShow < 10? "0.0" + this.alphaShow : this.alphaShow >= 10 && this.alphaShow < 100 ? "0." + this.alphaShow : 1.0;
-
-
this.alphaFade = this.alphaFade - 2
-
this.alphaShow = this.alphaShow + 2
-
-
if (this.alphaFade == 100 || this.alphaShow == 100) {
-
this.alphaFade = 100
-
this.alphaShow = 0
-
this.currentImg = this.currentImg + 1 > this.galleryLength-1 ? 0 : this.currentImg + 1
-
}
-
}
-
To make the script work you will need a holder with images like:
-
<div id="galeria1">
-
<img src="t1.jpg">
-
<img src="t2.jpg">
-
<img src="t3.jpg">
-
</div>
-
And make the call:
-
new makeSlideShow('galeria1',4,150,100)
-
Feel free to modify anything, just let my name there :P
Any questions use the email on the code!
Good luck
