var loadedImages = [], imageChanger; var slide = 0;//tracks which slide is showing slidePause = 1000; //length of time to keep a slide at 1 opacity var slider = function(){ imageChanger = $('slideshow'); var path = 'http://www.kaligrafie.eu/media/slideshow/'; var images = [ path + 'kaligrafie-03.jpg', path + 'kaligrafie-02.jpg', path + 'kaligrafie-10.jpg', path + 'kaligrafie-12.jpg', path + 'kaligrafie-13.jpg', path + 'kaligrafie-11.jpg', path + 'kaligrafie-06.jpg', path + 'kaligrafie-07.jpg', path + 'kaligrafie-14.jpg', path + 'kaligrafie-04.jpg' ]; imageChanger.setStyles({'opacity': 0, 'display': 'none'}); loadImages(); function loadImages(){ var imageChangerImgs = $$('#slideshow img'); if (imageChangerImgs.length > 0) imageChangerImgs.each(function(image) { image.remove(); }); imageChanger.setStyle('display', 'block'); new Asset.images(images, { onProgress: function(i) { this.setStyles({ 'position': 'absolute', 'opacity': 0 }); loadedImages[i] = this; }, onComplete: function() { var fx = $('slideshow').effect('opacity').start(1).chain(function(){ nextImg(-1); }); } }); } } function nextImg(){ slide = (slide == loadedImages.length-1)?0: slide+1; //slide = $random(0,loadedImages.length-1); //show pictures randomly if($E('img', imageChanger)){ $E('img',imageChanger).effect('opacity', { duration: 3000, onComplete: function(){ $E('img',imageChanger).remove(); } }).start(0); showImg(loadedImages[slide]);// fade out WHILE fading in next image } else showImg(loadedImages[slide]); } function showImg(img){ img.inject(imageChanger); img.effect('opacity', { duration: 3000, onComplete: function(){ setTimeout('nextImg()',slidePause); } }).start(1); } window.addEvent('domready', slider);