I have been doing some experimenting with the JavaScript Image Object and found some pretty cool tricks for reloading an image array. The code for reloading the array is very simple. The loadImageArray() function takes the group image count and the name of the group as arguments. The image names incorporate the group name and contain an index number to the image. The swapImage() function takes direction as an argument and allows the image array to be iterated through in either direction. Check out the example code ->

<HTML>
<HEAD>
<TITLE>Image Array Swapping Test</TITLE>

</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var imageArray=new Array();
var numImages = 0;

function loadImageArray(picnum, projectName)
{
	for (i=0; i<picnum; i++)
	{
		imageArray[i]=new Image();
		imageArray[i].src="images/"+projectName+(i+1)+".jpg";
	}
	numImages = picnum;
}

var curImage=-1;
var nextImage=0;

function swapImage(direction)
{
	if (document.images)
	{
		if(direction == "PREV")
		{
			nextImage=curImage+1;
			if (nextImage>=numImages)
				nextImage=0;
			if (nextImage == -1)
				nextImage = numImages-1;
		}else if(direction == "NEXT"){
			nextImage=curImage-1;
			if (nextImage>=numImages)
				nextImage=0;
			if (nextImage == -1)
				nextImage = numImages-1;
		}else if(direction == ""){
				nextImage=0;
		}
    if (imageArray[nextImage] && imageArray[nextImage].complete)
    {
      var target=null;
      if (document.images.MainImage)
        target=document.images.MainImage;
      if (document.all && document.getElementById("MainImage"))
        target=document.getElementById("MainImage");

      target.src=imageArray[nextImage].src;
      curImage=nextImage;
    }
  }
}

//these calls make the initial image load
loadImageArray('4', 'home');
setTimeout("swapImage()",  10);
//-->
</SCRIPT>
<BODY>

<table style="WIDTH: 750px; HEIGHT: 400px">
<tr>
<td style="WIDTH: 100px;">
<a href="javascript:loadImageArray('4', 'home');swapImage('');">Home Pics</a><br>
<a href="javascript:loadImageArray('2', 'animal');swapImage('');">Animal Pics</a><br>
</td>

<td><IMG ID="MainImage" NAME="MainImage"></IMG></td>
</tr>
<tr>
<td style="WIDTH: 100px;">
&nbsp;
</td>
<td  style="WIDTH: 650px;">
<a href="javascript:swapImage('PREV');"><< Previous</a>

<a href="javascript:swapImage('NEXT');">Next >></a>
</td>
</tr>
</table>
</BODY>
</HTML>
<HTML>
<HEAD>

<TITLE>Image Array Swapping Test</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var imageArray=new Array();
var numImages = 0;

function loadImageArray(picnum, projectName)
{
	for (i=0; i<picnum; i++)
	{
		imageArray[i]=new Image();
		imageArray[i].src="images/"+projectName+(i+1)+".jpg";
	}
	numImages = picnum;
}

var curImage=-1;
var nextImage=0;

function swapImage(direction)
{
	if (document.images)
	{
		if(direction == "PREV")
		{
			nextImage=curImage+1;
			if (nextImage>=numImages)
				nextImage=0;
			if (nextImage == -1)
				nextImage = numImages-1;
		}else if(direction == "NEXT"){
			nextImage=curImage-1;
			if (nextImage>=numImages)
				nextImage=0;
			if (nextImage == -1)
				nextImage = numImages-1;
		}else if(direction == ""){
				nextImage=0;
		}
    if (imageArray[nextImage] && imageArray[nextImage].complete)
    {
      var target=null;
      if (document.images.MainImage)
        target=document.images.MainImage;
      if (document.all && document.getElementById("MainImage"))
        target=document.getElementById("MainImage");

      target.src=imageArray[nextImage].src;
      curImage=nextImage;
    }
  }
}

//these calls make the initial image load
loadImageArray('4', 'home');
setTimeout("swapImage()",  10);
//-->

</SCRIPT>
<BODY>
<table style="WIDTH: 750px; HEIGHT: 400px">
<tr>
<td style="WIDTH: 100px;">
<a href="javascript:loadImageArray('4', 'home');swapImage('');">Home Pics</a><br>
<a href="javascript:loadImageArray('2', 'animal');swapImage('');">Animal Pics</a><br>

</td>
<td><IMG ID="MainImage" NAME="MainImage"></IMG></td>
</tr>
<tr>
<td style="WIDTH: 100px;">
&nbsp;
</td>
<td  style="WIDTH: 650px;">

<a href="javascript:swapImage('PREV');"><< Previous</a>
<a href="javascript:swapImage('NEXT');">Next >></a>
</td>
</tr>
</table>
</BODY>

</HTML>

Average Rating: 4.9 out of 5 based on 271 user reviews.

2 Responses to “”

  1. Thank you Says:

    This just made my day!

  2. Steve Says:

    I keep getting an error in firefox with this code.

    “target.src=imageArray[nextImage].src;” says “Error: target is null”;

    Any ideas.
    Thanks

Leave a Reply