Hi all, I’m using a script for my portfolio works section.
Basically, what it accomplishes is you can click on a button and the current image will change to a different image. The function ‘changeImage’ changes -from an array of images - a specific div’s (for example, the div is called 'icy-penguin-logo-screenshot-area) current image to another image.
My problem is that I need a way to have the first image to be loaded when the page loads. For example, on the MEI Secondary work section, you can see that none of the three images are loaded, and you have to click on the first one to see it. I just want each work section to have the first image loaded.
Right now I put:
<body onload="changeImage('icy-penguin-logo-screenshot-area', 0); changeImage('screenshot-area-two', 1)">
And that works for only one work section.
Hope that I explained this well enough. Thanks all.
Here is my script:
//Specify image paths [0], optional ("") link [1], title [2], and alt [3]
var dynimages=new Array()
dynimages[0]=["../../images/screenshots/icy-penguin-logo-one.jpg", "../../images/icy-penguin-logo.jpg", "Title Number One", "Alt Number One"]
dynimages[1]=["../../images/screenshots/mei-secondary-flash-one.jpg", "http://www.meisoc.com/flash1.html", "Title Number One", "Alt Number One"]
dynimages[2]=["../../images/screenshots/mei-secondary-flash-two.jpg", "http://www.meisoc.com/flash1.html", "Title Number Two", "Alt Number Two"]
dynimages[3]=["../../images/screenshots/mei-secondary-flash-three.jpg", "http://www.meisoc.com/flash1.html", "Title Number Three", "Alt Number Three"]
//Preload images ("yes" or "no"):
var preloadimg="yes"
//Set optional link target to be added to all images with a link:
var optlinktarget="_blank"
//Set image border width
var imgborderwidth=0
//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)"
///////No need to edit beyond here/////
if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}
function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" alt="'+theimg[3]+'" title="'+theimg[2]+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}
function changeImage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
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()
return false
}
}
And the code that executes the script:
<a href="#" onclick="return changeImage('icy-penguin-logo-screenshot-area', 0)">1</a>
Thanks!
