Log in

View Full Version : 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"><!--webbot bot="HTMLMarkup" startspan --><div id="dynloadarea" style="width:50px;height:225px"></div><!--webbot bot="HTMLMarkup" endspan i-checksum="17728" --></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: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+'">'
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"><!--webbot bot="HTMLMarkup" startspan --><div id="dynloadarea" style="width:50px;height:225px"></div><!--webbot bot="HTMLMarkup" endspan i-checksum="17728" --></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/dynamicindex4/thumbnail2.htm
is incorrect...!

Feel free to view my page and let me know where the code is wrong...
http://members.fortunecity.com/lanciault/pages/okeydokeysmokey.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.com/pages/okeydokeysmokey.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 :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.
lancelot
03-17-2005, 06:57 AM
make the picture smaller, and lessen the quality from 80% of original to 70%?
jscheuer1
03-17-2005, 07:31 AM
Yes, unless your intention is to have users download it for the purpose of making prints. Even then, better to have the Web style graphic for display and the huge original available for download. The intermediate sized one is still too big to display in a reasonable amount of time for slow connections, and remember, even broadband slows down sometimes. This is not only my opinion but rather the current unwritten standard for web based graphics of this sort.
lancelot
03-18-2005, 04:59 PM
thanks...is there a batch photo converter? for photoshop cs? image ready cs?
any others?
to change the size of the picture and the quality?
jscheuer1
03-18-2005, 06:31 PM
In general I use PaintShop Pro 7, it has a built in batch mode, not sure if it can handle all the tasks in a conversion like this. I also use Xat Image Optimizer Pro, not sure of the version, it is trialware available at xat.com, very robust for this sort of thing. Consequently, I wouldn't know about PhotoShop, perhaps others could jump in here or a web search would probably turn up a number of these plug-ins for your program.