How do i create a nice looking image fadein onload with mootools?

Question

Hi everyone!

I´m creating a website for a photographer who would like a fine fadein on his images. I have excluded flash as a solution and would like to use those fine-looking effects of mootools fx. But the problem is that I'm really lousy when it comes to javascript. So if anyone could give me an easy solution for fading in one single image onload and when the image is loaded I would be really happy. I know there is a lot of different people out there who have this. But the problem is that i don't know how the code works even if it is a complete solution. So most important. If anyone has got the time to explain what every single line of code does i would be more than grateful. Thanks!

Answer 1

A simple fade-in is surely the simplest thing one can imagined:

// set-up an event on the browsers window
window.addEvents({

    // be sure to fire the event once the document is fully loaded
    load: function(){

        // assing 'singleImage' variable to the image tag with the 'image' ID
        var singleImage = $('image');

        // set a bunch of CSS styles to the aforementioned image
        singleImage.set('styles', {
            'opacity': 0,
            'visibility': 'visible'
        });

        // fade in the image
        singleImage.fade('in');
    }
});​

Working example: http://jsfiddle.net/oskar/RNeS5/ (HTML, CSS, MooTools)

Answer 2

I recently used this:

http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

It works like a charm, and you can choose more than one image if image rotation is desired.