Sunday, January 7, 2007

Mochislide

Ok, here's how to do a simple slideshow with fading images in mochkit. Simple and powerful, Lord how I love mochikit ! Example is here

var images = new Array();
// Set up your images here 
images[0]="images/deedee.gif";
images[1]="images/dexter.jpg";

var imageObjs = new Array(); 

var currentIdx = 0;

// preload images
for(idx in images){
    var tmp = new Image();
    var imageName = images[idx];
    tmp.src = imageName;
    imageObjs[idx] = tmp;
}

// start interval times
var slideInterval = setInterval('onInterval()', 5000); 

function onInterval(){
    // increment image index and reset if necessary
    currentIdx = currentIdx + 1;
    if(currentIdx >= images.length){
        currentIdx = 0;
    }
    // fade out existing image
    // and pull in next image
    fade("slideshow", {"to" : "0.1", "duration" : "0.4", afterFinish: function () {
    $("slideshow").src = imageObjs[currentIdx].src;
    appear("slideshow", {"duration" : "0.4"});
    }});
    
}

No comments: