Created
May 7, 2011 11:27
-
-
Save mazuhl/960422 to your computer and use it in GitHub Desktop.
Clickable main images for Drop Dead catalogue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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 | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
One thing I noticed when going through this...
Firebug kept showing an error on line 13 because
x
should be 1. Thedynimages
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.