54
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
Expand|Select|Wrap|Line Numbers
- //////////////////////////////////////
- // 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
- }
- }
Expand|Select|Wrap|Line Numbers
- <div id="galeria1">
- <img src="t1.jpg">
- <img src="t2.jpg">
- <img src="t3.jpg">
- </div>
Expand|Select|Wrap|Line Numbers
- new makeSlideShow('galeria1',4,150,100)
Any questions use the email on the code!
Good luck
