SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Apr 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help me mod this to support multiple images?

    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!

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •