Thumbnail Viewer II: it almost works...when mouseover on tn, you get full sized pic.

**lancelot** · 03-01-2005, 12:28 AM

BTW, the code is incomplete on the page, which may take some time for the beginner to notice (it took me two days of staring at the code when I finally looked at the page source to compare the code...):

Posted on the page for users to copy:

<a href="#" onMouseover="modifyimage('dynloadarea', 0)">image 1 (onmouseover)</a><br>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)">image 2 (onmouseover)</a><br>
<a href="#" onClick="return modifyimage('dynloadarea2', 2)">image 3 (onclick)</a><p>

<div id="dynloadarea" style="width:80px;height:225px"></div>

<div id="dynloadarea2" style="width:80px;height:200px"></div>

Viewed source code for that same page:
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="20%"><a href="#" onMouseover="modifyimage('dynloadarea', 0)"><img border="0" src="thumb1.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)"><img border="0" src="thumb2.jpg" width="50" height="50" style="margin-bottom: 5px"></a><br>
<a href="#" onMouseover="modifyimage('dynloadarea', 2)"><img border="0" src="thumb3.jpg" width="50" height="50" style="margin-bottom: 5px"></a></td>
<td width="80"><div id="dynloadarea" style="width:50px;height:225px"></div></td>
</tr>
</table>

Anyways, my question is that now that I have copied the correct code (from the source), and modified it to suit my pictures...I'm having troubles with the size of the expanded view pictures...even though this code: --><div id="dynloadarea" style="width:50px;height:225px"></div> seems to be the one which controls the size of the expanded pictures, it doesn't work?! It's loading the pictures at the size in which they were originially taken?!...any suggestions?...if you cannot spot the problem, here's my code for your purusal...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<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]=["pictures/gf.JPG", ""]
dynimages[1]=["pictures/photo radar van/5-0 photo radar van (rear).jpg", ""]
dynimages[2]=["photo3.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

XImageTransform.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+'">'
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>
<title>Pimp 'n</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="20%"><a href="#" onMouseover="modifyimage('dynloadarea', 0)"><img border="0" src="pictures/tn_gf.jpg" width="100" height="90" style="margin-bottom: 5px"></a><br>
<a href="#" onMouseover="modifyimage('dynloadarea', 1)"><img border="0" src="pictures/photo radar van/thumbnails/tn_5-0 photo radar van (rear).jpg" width="100" height="90" style="margin-bottom: 5px"></a><br>
<a href="#" onMouseover="modifyimage('dynloadarea', 2)"><img border="0" src="thumb3.jpg" width="100" height="90" style="margin-bottom: 5px"></a></td>
<td width="80"><div id="dynloadarea" style="width:50px;height:225px"></div></td>
</tr>
</table>
</body>
</html>

**lancelot** · 03-05-2005, 05:19 PM

Anything in life that's worthwhile is difficult...are you up to the challenge?
Do you have the cohones?

Please take the time to let me know what's wrong with the script that it makes the original picture appear (instead of at the size we tell it to) i.e. what I'm saying here is that the code posted on the page http://www.dynamicdrive.com/dynamici...thumbnail2.htm
is incorrect...!

Feel free to view my page and let me know where the code is wrong...
http://members.fortunecity.com/lanci...okeysmokey.htm

Thanx in advance...

**ddadmin** · 03-09-2005, 10:31 PM

Hi:
I'm a little confused- do you want the loaded images to in fact all be of the same dimensions, instead of their true dimensions? Most people actually prefer the later? Anyhow, the most straightfoward solution would be to modify the line:

imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'

so it reads"

imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" width="300px" height="300px">'

This should cause all loaded images to be of the dimension 300x300

**lancelot** · 03-10-2005, 07:10 AM

I guess the only reason that I would prefer that the images load to a predefined size is so that they're easier to view for the user, because their original size is huge, and bigger than the average browser window

Thank you for the response, although, I wish it was sooner.

**Aradon** · 03-11-2005, 09:06 AM

Hi,

I too noticed that there was no code for the script to re-size the larger images, so to avoid potential lose of quality, i used fireworks and manually resized all the pictures.

**lancelot** · 03-12-2005, 04:16 PM

Is that possible? I let I.E. resize mine...I don't think I noticed degredation of quality?...take a look at http://sirlancelotindustries.0catch....okeysmokey.htm
hey, when you go to http://caravan.no-ip.org do you get a runtime error on line '2'?

**lancelot** · 03-14-2005, 04:24 PM

great assistance guys, thanks again.

**jscheuer1** · 03-15-2005, 06:08 AM

Just my 2 cents but, shouldn't you get those bad boys into an image program and do a bilinear resampling resize to reduce them to thier display size to save on bandwidth? It would actually make them clearer too.

**lancelot** · 03-16-2005, 05:05 PM

I reduced them by a factor of their original size so that users wouldn't load an image that they had to scroll horizontally and vertically to see!

So, why would I want them to be their original size? I'm confused

maybe you viewed the old code...have a look at the new one...the original images were 1.6MB and they were 1024x800...

**jscheuer1** · 03-16-2005, 11:03 PM

Well for example, on the new page the image:
photo%20radar%20van/5-0%20photo%20radar%20van%20(front).jpg
is:
745016 bytes
its display size is set to:
533px by 400px
its actual dimensions are:
816px by 606px
and even with a broadband cable modem it takes awhile to load, years for dial-up, I'd bet.

I loaded the original (from the old page) real big one into my image program and got:
23312 bytes
actual dimensions:
533px by 399px
Even at 70% jpg quality it looks clearer. This is the image I would use.