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

[code=javascript]
//////////////////////////////////////
// Romulo do Nascimento Ferreira //
// romulo.nf@gmail .com //
//////////////////////////////////////

function makeSlideShow(h older,speed,wid th,height) {
gallery = document.getEle mentById(holder )
gallery.style.w idth = width + "px"
gallery.style.h eight = height + "px"
gallery.style.c ssFloat = "left"
this.alphaShow = 0
this.alphaFade = 100
this.currentImg = 0
this.animationS peed = speed
this.images = gallery.getElem entsByTagName(" img")
this.galleryLen gth = this.images.len gth

for (x=0; x<this.galleryL ength; 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.mozOpaci ty = "0"
}

var _this = this
var startShow = window.setInter val(function(){ _this.engine()} ,this.animation Speed*10)
}

makeSlideShow.p rototype.engine = function() {
this.nextImage = this.currentImg + 1 < this.galleryLen gth ? 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.mozOpaci ty = 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.mozOpaci ty = 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.galleryLen gth-1 ? 0 : this.currentImg + 1
}
}
[/code]

To make the script work you will need a holder with images like:
[code=html]
<div id="galeria1">
<img src="t1.jpg">
<img src="t2.jpg">
<img src="t3.jpg">
</div>
[/code]

And make the call:
[code=javascript]
new makeSlideShow(' galeria1',4,150 ,100)
[/code]

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