Image Thumbnail Viewer II

[Max_Current]

Script: Image Thumbnail Viewer II
http://www.dynamicdrive.com/dynamici...humbnail2.htm#

Hi guys,

At the start of the scirpt where the big picture details are put in, is there a way to determin their size.
i.e. for below how would I set the size of image1?:

var dynimages=new Array()
dynimages[0]=["image1.jpg",""]
dynimages[1]=["image2.jpg", ""]
dynimages[2]=["../dynamicindex14/photo3.jpg", ""]
dynimages[3]=["bs00847a.gif", "http://www.cnn.com"]
dynimages[4]=["bs00825a.gif", "http://www.yahoo.com"]
dynimages[5]=["hh01478a.gif", "http://www.google.com"]

Thanks

[ddadmin]

Are you trying to resize the images so they are different from their default dimensions when shown? It's a lot of unnecessary fuss otherwise, as the script currently just uses the images' default dimensions.

[Max_Current]

Yeah, I want to make them smaller than the images default size.

[jscheuer1]

Resize them in an image program.

[ddadmin]

Sorry for the delay. To be able to set an explicit width/ height attribute for certain images within your array, simply replace the code of Step 1 with the below instead:

<script type="text/javascript">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["photo1.jpg", "http://www.cnn.com", "100 by 250"] //this one has optional width/height attributes defined
dynimages[1]=["photo2.jpg", "http://www.yahoo.com"]
dynimages[2]=["photo3.jpg", "http://www.google.com"]

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

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

//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+'">'
if (typeof theimg[2]!="undefined") //if explicit dimensions specified
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" width="'+parseInt(theimg[2].split("by")[0])+'px" height="'+parseInt(theimg[2].split("by")[1])+'px">'
else
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(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
}
}

</script>

The first image has dimensions "100 by 250" explicitly set.