Looping Assets.image demo script

paddyohanlon · by **paddyohanlon** on Sat Nov 22, 2008 1:24 am

I'm playing around with the Assets.image demo code, http://demos111.mootools.net/Asset.images. I want the images to start changing automatically and to loop, so I have a continuous slide show. I've removed the click events so the script runs when the page is loaded, but I have no idea how to get this to loop.

Here's what I have...

Line number On/Off | Expand/Contract | Select all

window.addEvent('domready', function(){
            var busy = false, timer, loadedImages = [], gallery = $('gallery'), progress = $('progress'), bar = $E('#progress .bar'); 
            
            
            // Place all photos to be displayed in the header in this folder
            var path = 'images/header-photos/';
            
            
            // Enter the names of the images to be displayed here
            var images = [
                path + 'header-photo-01.jpg',
                path + 'header-photo-02.jpg'
            ];
            
            
            gallery.setStyles({'opacity': 0, 'display': 'none'});
            progress.setStyle('visibility', 'hidden');
            
        
            
                if (!busy) {
                    
                    var galleryImgs = $$('#gallery img');
                
                    
                    busy = true;
                    progress.setStyle('visibility', 'hidden');
                    gallery.setStyle('display', 'block');
                    new Asset.images(images, {
                        onProgress: function(i) {
                            this.setStyles({
                                'position': 'absolute',
                                'opacity': 0,
                                'left': (gallery.getCoordinates().width / 2) - (this.width / 2),
                                'top': (gallery.getCoordinates().height / 2) - (this.height / 2)
                            });
                            loadedImages[i] = this;
                            var percent = ((i + 1) * progress.getStyle('width').toInt()) / images.length;
                            bar.setStyle('width', percent).setHTML(i + 1 + ' / ' + images.length);
                        },
                        onComplete: function() {
                            progress.setStyle('visibility', 'hidden');
                            var fx = $('gallery').effect('opacity').start(1);
                            timer = 0;
                            loadedImages.each(function(image, i) {
                                timer += 1500;
                                image.inject(gallery);
                                fx = function() {
                                    var imgEffect = image.effect('opacity', {duration: 1500});
                                    imgEffect.start(1).chain(function() {
                                        
                                    });
                                    
                                }.delay(timer * 2);
                            });
                        }
                    });
                };
        }
        
        ); 

Looping Assets.image demo script

Looping Assets.image demo script

Who is online