View Full Version : Image Thumbnail Viewer II - help

09-06-2005, 06:55 PM
SCRIPT: Image Thumbnail Viewer II

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()

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]!="")
return imghtml

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
if (imgobj.filters && window.createPopup)
return false



<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!

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