PDA

View Full Version : thumbnail viewer II: automatic width?



radiofriendlybox
02-28-2008, 01:11 AM
1) Script Title: image thumbnail viewer II

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

3) Describe problem: for the pics that are loaded into the "loadarea", i have several that are of diffrent widths. is there a way to set the width of the "loadarea" so that it automatically equals the width of each individual image?

i am asking because i have the description text (called by the "title" attribute) aligned right. since the current width of the "loadarea" is set at a constant number, the description text moves well beyond the right-edge of pics that have a smaller width.

ddadmin
02-28-2008, 03:45 AM
It's possible, but it's a lot easier if this width isn't based on the width of each image, but rather, just a manual number you can optionally specify within the HTML:


<a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage::mouseover::900px" rev="loadarea::http://www.dynamicdrive.com" title="This is an example">Thumbnail Example 1</a><br />

So the part in red is optional, and when defined, would cause the loaddiv to resize to 900px in width when the mouse rolls over this particular thumbnail link.

To enable this, add the below lines in red to the original script:


if (linkobj.getAttribute("rel").split("::")[2])
showcontainer.style.width=linkobj.getAttribute("rel").split("::")[2]
showcontainer.innerHTML=imageHTML

radiofriendlybox
02-28-2008, 04:14 PM
It's possible, but it's a lot easier if this width isn't based on the width of each image, but rather, just a manual number you can optionally specify within the HTML:


<a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage::mouseover::900px" rev="loadarea::http://www.dynamicdrive.com" title="This is an example">Thumbnail Example 1</a><br />

So the part in red is optional, and when defined, would cause the loaddiv to resize to 900px in width when the mouse rolls over this particular thumbnail link.

To enable this, add the below lines in red to the original script:


if (linkobj.getAttribute("rel").split("::")[2])
showcontainer.style.width=linkobj.getAttribute("rel").split("::")[2]
showcontainer.innerHTML=imageHTML

works perfect. thanks!