Image Slide Show

[Romulo NF]

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     //
//         [e-mail]            //
//////////////////////////////////////
 
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

[jpshahom]

Romulo,
I meant to say that it was a smart way of anchoring images in a slideshow.
thanks.
Jean-Pierre