var loadedImages = [], dekor; var slide = 0;//tracks which slide is showing slidePause = 1000; //length of time to keep a slide at 1 opacity var slider = function(){ dekor = $('dekor'); var path = 'http://www.ubytovani-beskydy.net/templates/default/img/dekor/'; var images = [ path + '06.jpg', path + '07.jpg', path + '08.jpg', path + '09.jpg', path + '10.jpg', path + '11.jpg', path + '12.jpg', path + '13.jpg' ]; dekor.setStyles({'opacity': 0, 'display': 'none'}); loadImages() function loadImages(){ var dekorImgs = $$('#dekor img'); if (dekorImgs.length > 0) dekorImgs.each(function(image) { image.remove(); }); dekor.setStyle('display', 'block'); new Asset.images(images, { onProgress: function(i) { this.setStyles({ 'position': 'absolute', 'opacity': 0 }); loadedImages[i] = this; }, onComplete: function() { var fx = $('dekor').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', dekor)){ $E('img',dekor).effect('opacity', {duration: 3000, onComplete: function(){ $E('img',dekor).remove(); } }).start(0); showImg(loadedImages[slide]);// fade out WHILE fading in next image } else showImg(loadedImages[slide]); } function showImg(img){ img.inject(dekor); img.effect('opacity', {duration: 3000, onComplete: function(){ setTimeout('nextImg()',slidePause); } }).start(1); } window.addEvent('domready', slider);