7
Dec/082

How to: Use MooTools to Fade Between Multiple Images

After I wrote my post “Using MooTools to fade between two images” I have received many request on how to fade between multiple images. So here is “How to: Use MooTools to Fade Between Multiple Images”. We start with the same HTML setup as we do in “Using MooTools to fade between two images” plus a few buttons; setup two DIV tags that are absolutely positioned over one another inside another DIV tag that uses default placement. Then you place your image tags inside each of the absolutely positioned DIV tags. Each of the DIV tags needs to have an id attribute so they can be referenced in your javascript code.

The HTML for the task will look like this:

1
2
3
4
5
6
7
8
<div id="button1" style="background-color:#aaaaaa; border: 1px solid #444; cursor: pointer;" onclick="toggle(this.image.src);">Image 1</div>
<div id="button2" style="background-color:#aaaaaa; border: 1px solid #444; cursor: pointer;" onclick="toggle(this.image.src);">Image 2</div>
<div id="button3" style="background-color:#aaaaaa; border: 1px solid #444; cursor: pointer;" onclick="toggle(this.image.src);">Image 3</div>
<div id="button4" style="background-color:#aaaaaa; border: 1px solid #444; cursor: pointer;" onclick="toggle(this.image.src);">Image 4</div>
<div style="height:112px;" >
    <div id="div1" style="position:absolute; opacity: 0;"><img id="image1" src="image1.jpg" /></div>
    <div id="div2" style="position:absolute; opacity: 1;"><img id="image2" src="image2.jpg" /></div>
</div>

For fading between multiple images there is some preparation we will need to do before we are ready to start switching images. First you need to create an object to associate buttons to your image source URLs, this makes it easy to change the number of buttons and images they load later. Then iterate that object creating new elements for each image and attaching them to the buttons. Creating new images and attaching them to the buttons does two things, it pre-loads the images and associates the image to the button that will show the image.

creating the object can be done with JavaScript Object Notation:

1
var buttonsAndImages = {'button1':'image1.jpg','button2':'image2.jpg','button3':'image3.jpg','button4':'image4.jpg'};

The loadImages function will take the buttionsAndImages object and create a new image object using the Mootools Element object and attach that image object to its associated button.

1
2
3
4
5
6
function loadImages(buttonsAndImages){
    for(biPairKey in buttonsAndImages) {
        var image = new Element('img',{ src:buttonsAndImages[biPairKey], style:'margin:3px;' });
        $(biPairKey).image = image;
    }
}

For multiple image switching we will use a function named toggle. In the toggle function we will set the source of the hidden image, start the effect to fade out the visible image and fade in the hidden image, and set a global variable to indicate which div is visible

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function toggle(newSrc){
    //stop the current animation if it is running.
    if($("div1").fx){$("div1").fx.stop();}
    if($("div2").fx){$("div2").fx.stop();}
    //Decide which div to hide and which to show.
    if(visibleDiv == $("div1")){
        //change the hidden image's source
        $("image2").src = newSrc;
        //fade the visible out and the hidden in.
        $("div1").fx = new Fx.Style($("div1"), 'opacity', {duration: 2000}).start(0);
        $("div2").fx = new Fx.Style($("div2"), 'opacity', {duration: 2000}).start(1);
        //Set which div is visible.
        visibleDiv = $("div2");
    }else{
        //change the hidden image's source
        $("image1").src = newSrc;
        //fade the visible out and the hidden in.
        $("div1").fx = new Fx.Style($("div1"), 'opacity', {duration: 2000}).start(1);
        $("div2").fx = new Fx.Style($("div2"), 'opacity', {duration: 2000}).start(0);
        //Set which div is visible
        visibleDiv = $("div1");
    }
}

Check out the demo of fading multiple images to see this in action. If you want to create a slide show or other implementation of this that automatically switches the images, read through my post on Delay, Periodical and Closures. Below you will find the source of the example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
    </head>
    <body>
        <script type="text/javascript" src="js/mootools-release-1.11.js" language="javascript"></script>
        <script language="javascript">
            var visibleDiv = $("div1");
            function toggle(newSrc){
                if($("div1").fx){$("div1").fx.stop();}
                if($("div2").fx){$("div2").fx.stop();}
                if(visibleDiv == $("div1")){
                    $("image2").src = newSrc;
                    $("div1").fx = new Fx.Style($("div1"), 'opacity', {duration: 2000}).start(0);
                    $("div2").fx = new Fx.Style($("div2"), 'opacity', {duration: 2000}).start(1);
                    visibleDiv = $("div2");
                }else{
                    $("image1").src = newSrc;
                    $("div1").fx = new Fx.Style($("div1"), 'opacity', {duration: 2000}).start(1);
                    $("div2").fx = new Fx.Style($("div2"), 'opacity', {duration: 2000}).start(0);
                    visibleDiv = $("div1");
                }
            }

            function loadImages(buttonsAndImages){
                for(biPairKey in buttonsAndImages) {
                    var image = new Element('img',{ src:buttonsAndImages[biPairKey], style:'margin:3px;' });
                    $(biPairKey).image = image;
                }
            }

            function faderInit(){
                //create an object to store the relationship of the buttons to the images.
                var buttonsAndImages = {'button1':'image1.jpg','button2':'image2.jpg','button3':'image3.jpg','button4':'image4.jpg'};
                loadImages(buttonsAndImages);
            }
            window.addEvent("domready", faderInit);
        </script>
        <div style="width:453px">
            <div id="button1" style="background-color:#aaaaaa; border: 1px solid #444; cursor: pointer;" onclick="toggle(this.image.src);">Image 1</div>
            <div id="button2" style="background-color:#aaaaaa; border: 1px solid #444; cursor: pointer;" onclick="toggle(this.image.src);">Image 2</div>
            <div id="button3" style="background-color:#aaaaaa; border: 1px solid #444; cursor: pointer;" onclick="toggle(this.image.src);">Image 3</div>
            <div id="button4" style="background-color:#aaaaaa; border: 1px solid #444; cursor: pointer;" onclick="toggle(this.image.src);">Image 4</div>
            <div style="height:112px;">
                <div id="div1" style="position:absolute; opacity: 0;"><img id="image1" src="image1.jpg" /></div>
                <div id="div2" style="position:absolute; opacity: 1;"><img id="image2" src="image2.jpg" /></div>
            </div>
        </div>
    </body>
</html>

[Post to Twitter]  [Post to Plurk]  [Post to Yahoo Buzz]  [Post to Delicious]  [Post to Digg]  [Post to Ping.fm]  [Post to Reddit]  [Post to StumbleUpon] 

Filed under: DOM, FX, JavaScript, MooTools, click, createElement, effect, fade, how to, image, preload, programming
2 Comments
17
Mar/083

Using MooTools to fade between two images

Fading between two images is actually a fairly simple task with MooTools. The first thing you need to do is setup up two DIV tags that are absolutely positioned over one another inside another DIV tag that uses default placement. Then you place your image tags inside each of the absolutely positioned DIV tags. Each of the DIV tags needs to have an id attribute so they can be referenced in your javascript code.

The HTML for the task will look like this:

1
2
3
4
5
6
<pre>
&lt;div style="height:112px;" &gt;
    &lt;div id="div1" style="position:absolute; opacity: 0;"&gt;&lt;img id="image1" src="image1.jpg" /&gt;&lt;/div&gt;
    &lt;div id="div2" style="position:absolute; opacity: 1;"&gt;&lt;img id="image2" src="image2.jpg" /&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

This gives you two DIV tags that will stack on top of one another but the DIV they are inside of will flow with the page. One of the DIV tags starts with an opacity of zero and the other with an opacity of one.

Next you will need a way to make one image disappear and the other appear. We do this by using the MooTools effects. MooTools allows you to animate the change of a style from one value to the next. The easiest way to do this is to use the effect member available on any element accessed with MooTools. To transition from one image to the other smoothly we animate the opacity of each DIV element in opposite directions one becoming fully opaque and the other becoming fully transparent. We do that with the following function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<pre>
function show(whichOne){
    if(whichOne == 1){
        tDiv = "div1";
        vDiv = "div2";
    }else{
        tDiv = "div2";
        vDiv = "div1";
    }
    if($(tDiv).fx){$(tDiv).fx.stop();}
    if($(vDiv).fx){$(vDiv).fx.stop();}
    $(tDiv).fx = $(tDiv).effect('opacity', {duration: 2000}).start(0);
    $(vDiv).fx = $(vDiv).effect('opacity', {duration: 2000}).start(1);
}
</pre>

First you decide which DIV tag will become Transparent and which one will be visible. Next there are two lines of code to check for an active animation and stop any animations that are already running, before we start some new animations. The last two lines create an animation attached to each DIV, going from the current opacity to the specified Opacity, and sets the animation object to the DIV tags .fx member. See the full code below or check out the example.


Update: By popular demand I have created an new post that covers fading multiple images here: How to: Use MooTools to Fade Between Multiple Images

[Post to Twitter]  [Post to Plurk]  [Post to Yahoo Buzz]  [Post to Delicious]  [Post to Digg]  [Post to Ping.fm]  [Post to Reddit]  [Post to StumbleUpon] 

Filed under: JavaScript, MooTools, effect, fade, how to, image, programming
3 Comments

Categories

Blogroll

Archives

Meta

Tweet This Post links powered by Tweet This v1.3.9, a WordPress plugin for Twitter.