PDA

View Full Version : Thumbnail Viewer II, passing width + height to loadarea



robin218
04-25-2008, 08:27 PM
1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

3) Describe problem: Typically, the loadarea (where the enlarged image displays) size is pre-set within the HTML, per the example:

<div id="loadarea" style="width: 600px"></div>

What I would like to figure out, is how to pass the loadarea size through the linked values, much the same as height and width values are pre-set for many of the banner rotation scripts, by passing a couple more vars to the loadarea:

<a href="http://www.mysite.com/image1_large.jpg" rel="enlargeimage::mouseover" rev="loadarea::http://www.dynamicdrive.com::500::350" title="This is an example">Thumbnail Example 1</a>

So the loadarea would have width (ex: 500) and height (ex: 350) specified, and could change dynamically depending on the particular image being loaded into that div space.

Is this possible? Setting the loadarea to the max width and max height of your largest image makes for awkward spacing when smaller images are loaded in between the larger ones. Having it resize to match the image being loaded would be very helpful. I'm sure this requires tinkering with the thumbnailviewer2.js script. It would also change the loadarea HTML, because the width and height would be passed to it through the links.

<div id="loadarea"></div> (??)

Any help is greatly appreciated!

ddadmin
04-28-2008, 07:39 AM
Sure, try the below modified .js file. It adds the ability to do what you described above, though the two values are embedded inside the "rel" attribute instead:


<a href="http://www.mysite.com/image1_large.jpg" rel="enlargeimage::mouseover::500px::350px" rev="loadarea::http://www.dynamicdrive.com" title="This is an example">Thumbnail Example 1</a>