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 = $('image-changer'); var path = 'http://www.pixmedia.cz/media/portfolio-header/'; var images = [ path + 'gallerycafe-cz.jpg', path + 'dastcompany-cz.jpg', path + 'budufit-cz.jpg', path + 'fullsport-cz.jpg', path + 'woox-cz.jpg', path + 'litepodlahy-duda-cz.jpg', path + 'oknacert-cz.jpg', path + 'kraken-cz.jpg', path + 'luxusni-nehty-cz.jpg', path + 'ubytovani-beskydy-bily-kriz-cz-leto.jpg' ]; imageChanger.setStyles({'opacity': 0, 'display': 'none'}); loadImages(); function loadImages(){ var imageChangerImgs = $$('#image-changer 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 = $('image-changer').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);