2008 December | SweetVision

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

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>

Filed under: DOM, FX, JavaScript, MooTools, click, createElement, effect, fade, how to, image, preload, programming

2 Comments

2
Dec/083

Debug JavaScript in Internet Explorer

If you have ever had the horror of finishing up some complex JavaScript in Firefox, and when you try it in IE you just get a bunch of usless and cryptic errors that all point to the wrong line of code, this article is for you. You can actually get a full debugger for Internet Exploerer for free that is about as cabable as debugging Javascript as Firebug is in Firefox. There is no plugin or addon for IE that will give you a firebug like experience, but with a little extra downloading and work you can get a setup that will allow you to set break points and inspect objects in JavaScript applications in IE. First thing you will need to download the free Visual Web Developer Express IDE from Microsoft Visual Web Developer is like Firebug for Internet Explorer, only it is not an addon and you have to do a bunch of setup befure it will be useful. It is free but it will cost you more than 200 megs of hard drive space and about an hour of downloading and installing.

Once you have Visual Web Developer Express installed launch the IDE and create a new blank web site:
File >> New Web Site
Select “Empty Web Site” and give the project a name and click OK.

If your default web browser is something other than IE you will need to setup Visual Web Developer do debug in Internet Explorer by default.

On the right side of the IDE you will find the Solution Exploerer, right click on your solution and select “Browse With”. In the browse with window select Internet Explorer and click the Set as Default button. This will not change your system default browser just the browser that will be used by this solution by default. Once you have IE set as default for the solution you can click cancel.

Now you need to make sure IE is ready to be debugged. Open Internet Explorer, click on Tools >> Options, select the Advanced tab and remove the check from “Disable Script Debugging (Internet Explorer)” and click OK.

Now you are ready. Switch back to Visual Web Developer and press F5 to start debugging. If this is the first time you have launched this solution Visual Web Developer may display a dialog stating that a web.config could not be found. If you recieve this dialog choose “Add a new web.config…” and click ok. This should launch Internet Explorer with an error page, just type in the URL of the page you want to debug in the address bar. Once the page loads if you switch back to Visual Web Developer Express you will see all of the files loaded by the page in the Solution Explorer on the right. Double click the file with the JavaScript you wish to debug, which will open the file in the IDE. You can now set break points where you want them. Once you have your break points set switch back to IE and take the action that will execute the code you are debugging and Visual Web developer will stop on your break points letting you inspect the objects and variables at that point.

To make the process easier you can right click on the solution in the solution explorer and select “Add New Item”. From the presented installed templates choose “HTML Page”, and name it index.htm. In the head of the generated HTML add a meta refresh to go to the page you wish to debug. e.g. <meta http-equiv=”refresh” content=”0;url=http://www.yourdomain.com/pagetodebug.html” />. After adding that when you debug it will automatically redirect to the page you are working on.

Filed under: Debugging, Firebug, IE, Internet Explorer, JavaScript, breakpoint

3 Comments

SweetVision Javascript and other web programming topics

How to: Use MooTools to Fade Between Multiple Images

Debug JavaScript in Internet Explorer

Categories

Blogroll

Archives

Meta