Clickable main images for Drop Dead catalogue

image_swapper.js

//Preload images ("yes" or "no"):
var preloadimg="yes"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

if (preloadimg=="yes"){
	for (x=0; x<dynimages.length; x++){
		var myimage=new Image();
		myimage.src=dynimages[x][0];
	}
}

function returnimgcode(imageindex){ 
	var theimg = dynimages[imageindex];
	var thenextimg = getnextimage(imageindex);
	var imghtml="";

	if (theimg[1]!="") { imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'; }
	imghtml += '<img alt="Drop Dead Clothing Product" onClick="modifyimage(\'dynloadarea\',' + thenextimg + '); return false;" src="' + theimg[0] + '" />';
	if (theimg[1]!="") { imghtml+='</a>'; }
	return imghtml;
}

function getnextimage(imageindex){
	if (imageindex == (dynimages.length - 1)) {
		// last image, so go back to start
		return 1;
	} else {
		// return the index of the next image
		return imageindex + 1;
	}
}

function modifyimage(loadarea, imgindex){
	if (document.getElementById){
		$("#"+loadarea).fadeOut("fast", 
			function() {
				var imgobj=document.getElementById(loadarea);
				imgobj.innerHTML = returnimgcode(imgindex);
				$("#"+loadarea).fadeIn("fast");
			}
		);
		
		
		/*if (imgobj.filters && window.createPopup){
			imgobj.style.filter=filterstring;
			imgobj.filters[0].Apply();
		}
		imgobj.innerHTML=returnimgcode(dynimages[imgindex]);
		if (imgobj.filters && window.createPopup) imgobj.filters[0].Play();*/
		
		if(current_image_index > 0){
			document.getElementById("i_control_item_" + current_image_index).className = 'not_active';
			$("#i_control_item_" + current_image_index).fadeTo("slow", 0.33);
		}
		current_image_index = imgindex;
		document.getElementById("i_control_item_" + imgindex).className = 'active';
		$("#i_control_item_" + imgindex).fadeTo("slow", 1);
		
	}
	return false
}

One thing I noticed when going through this...

if (preloadimg=="yes"){
    for (x=0; x<dynimages.length; x++){
        var myimage=new Image()
        myimage.src=dynimages[x][0]
    }
}

Firebug kept showing an error on line 13 because x should be 1. The dynimages indexing starts at 1 (shown below). Or you could zero index the arrays, but it'd need some tweaks in the code above as it works around that.

var dynimages=new Array()
dynimages[1]=["shopimages/TooCoolForSchoolBlackGirls_Main1.jpg", ""]
dynimages[2]=["shopimages/TooCoolForSchoolBlackGirls_Main4.jpg", ""]
dynimages[3]=["shopimages/DD_WEBSTORE_FLAT_0039_DD_091010_1607.jpg.jpg", ""]
dynimages[4]=["shopimages/DD_WEBSTORE_FLAT_0051_DD_091010_1619.jpg.jpg", ""]
dynimages[5]=["shopimages/DD_WEBSTORE_FLAT_0043_DD_091010_1611.jpg.jpg", ""]
dynimages[6]=["shopimages/DD_WEBSTORE_FLAT_0046_DD_091010_1614.jpg.jpg", ""]
current_image_index = 0;