PDA

View Full Version : Image Thumbnail Viewer II - help



res11295
09-06-2005, 06:55 PM
SCRIPT: Image Thumbnail Viewer II
http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm


Hi everyone,

I'm new here and this is my first post.

The way I want it to work is when you click on a thumbnail, it will load a larger version of the thumbnail on the same page (this is currently working fine). I then want when you click on the larger image for it to open a new window that displays an even larger size. I currently have the popup working but can figure out how to pass the image size. I was trying to load the image sizes into the "dynimages" array and pass it to the "returnimgcode" function. Any idea how I can acheive this?

Can I store the height and width in the array as in the example below and then read it in later?

dynimages[0]=["wed01_medium.jpg", "wed01_large.jpg",600,300]

The line of code that is giving trouble is:
imghtml='<a href="'+theimg[1]+'" onclick="window.open(this.href,\'popupwindow\',\'width=500,height=500,scrollbars=no,statusbar=no,resizable=yes,\');return false;" target="_blank">'


I think it's pretty easy but I can't figure it out. Since I changed the code slightly, please see the code below...


-------------------
<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]=["wed01_medium.jpg", "wed01_large..jpg"]
dynimages[1]=["wed02_medium.jpg", "wed02_large..jpg"]
dynimages[2]=["wed03_medium.jpg", "wed03_large..jpg"]


//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]+'" onclick="window.open(this.href,\'popupwindow\',\'width=500,height=500,scrollbars=no,statusbar=no,resizable=yes,\');return false;" target="_blank">'
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>

------------------

<div id="dynloadarea" style="width:5px;height:50px">

-------------------

<img width="41" height="47" src="wed01_thumb.jpg" border="0" onClick="modifyimage('dynloadarea', 0)">

-------------------

Thanks in advance for your help!
Rick

res11295
09-07-2005, 04:42 PM
This has been resolved. Thanks!