Help me mod this to support multiple images?

**mhale0** · Apr 14, 2008 12:41

I'm trying to convert a script I've put together to support multiple images.
The script preloads images, and then switches them at timed intervals.
It works great for one image, but I'm having trouble making it modular.

I'm not posting any of the attempts I've made because they seem so far off it's probably not worth it. I'm just going to post the single image version.

The biggest problem I'm having is that I keep getting null value errors for variables within functions. I do not understand why they error out when the function shouldn't even be evaluated until it's called. Can someone explain that to me?

Code below:

xhtml:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Switching Image</title>
	<script type="text/javascript" src="imageSwitcher.js"></script>
</head>
<body>
	<div id="wrapper">
	
	<img id="switchedImage" src="images/random185x185/blue.jpg" alt="box" width="185" height="185" />

	</div> <!-- End wrapper -->
</body>
</html>

javascript:

Code:

var imageList = [];

// Populate this array with image file names
var A = ["cyan.jpg","blue.jpg","green.jpg","magenta.jpg","orange.jpg","yellow.jpg"];

// Insert the path to the images to be switched between the quotes.
var path = "images/random185x185/";

// Insert a numeric value below to set the switch interval, in milliseconds.
var interval = 500;

// No need to change anything below this point.

// This sets the original value for the rotation loop. It's global.
var count = 0;
// This preloads the images to minimize delay when rotating.
// It also populates the empty imageList array with the path and filenames
while (A.length) {
	imageList[count] = new Image();
	imageList[count].src = (path + A.shift());
	count++;
}
// Resets count after set up is complete.
count = 0;

// This function performs the actual rotation of the image sources.
function switcher() {
	var url = imageList[count].getAttribute("src");
	var imageTarget = document.getElementById("switchedImage");
	imageTarget.setAttribute("src", url);
	count++;
	if (count > (imageList.length - 1))
		count = 0;
	setTimeout ("switcher()", interval);
}

window.onload = switcher;

Thanks!

**jimfraser** · Apr 14, 2008 14:06

Try this out:

Code:

<html>
<head>
<script type="text/javascript">
var loadedImageList = [];
var imagePath = "images/random185x185/";

if (!Array.indexOf) {
	Array.prototype.indexOf = function(searchFor) {
		var item;
		for (var i=0; item=this[i]; i++) {
			if (item == searchFor) {
				return i;
			}
		}
		return -1;
	};
}

function Flipper(target, srcList, delay) {
	// multi-compatible delay image swapper dealie
	this.target = target;
	this.srcList = srcList;
	this.delay = delay;
	this.current = 0;
	doPreload(srcList);
	doSetTimeout(this);
}

function doSetTimeout(obj) {
	window.setTimeout(function () {switcher(obj)}, obj.delay);
}

function switcher (obj) {
	obj.target.setAttribute("src", imagePath + obj.srcList[obj.current++]);
	if (obj.current > obj.srcList.length - 1) {
		obj.current = 0;
	}
	doSetTimeout(obj);
}

function doPreload(list) {
	var imgFile;
	for (var i=0; imgFile = list[i]; i++) {
		if (loadedImageList.indexOf(imgFile) == -1) {
			var img = new Image();
			img.src = imagePath + imgFile;
			loadedImageList.push(imgFile);
		}
	}
}
</script>
</head>
<body>
	<img id="img1" src="something.jpg" /><img id="img2" src="something.jpg" /><img id="img3" src="something.jpg" />

<script type="text/javascript">
	new Flipper(document.getElementById("img1"), ["cyan.jpg","magenta.jpg"], 500);
	new Flipper(document.getElementById("img2"), ["orange.jpg","yellow.jpg","blue.jpg"], 2000);
	new Flipper(document.getElementById("img3"), ["cyan.jpg","blue.jpg","green.jpg","magenta.jpg","orange.jpg","yellow.jpg"], 5000);	
</script>
</body>
</html>

User Tag List

Thread: Help me mod this to support multiple images?

Thread Tools

Display

Help me mod this to support multiple images?

Bookmarks

Bookmarks

Posting Permissions