Image Thumbnail Viewer II

[yazta]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem: I want to put the thumbnails in a iframe so that I can use a scroll bar. I don't want the container showing the enlarged image to be part of the iframe. How do i do this?
I have done this so far:

<td width="370" height="325" align="left">
<iframe class="borde" src ="thumbnails.html" frameborder="0" width="370" height="325"></iframe>
<td width="250"><div id="loadarea" style="width: 250px; height: 365px"></div></td>

with this, i don't know how to call/specify the "loadarea" div in thumbnails.html

[ddadmin]

Hmm I'm not sure what you're trying to accomplish exactly, but if all you're looking to do is modify the loading DIV so that it's a set dimension, with scrollbars showing to accommodate larger images, just do something like this instead to the loading DIV:

<div id="loadarea" style="width: 500px; height: 300px; overflow-y: scroll">
This DIV will show my enlarged images!
</div>

[jscheuer1]

That will only guarantee overflow with a scrollbar in one dimension (vertical) if the image is too tall. Although, since the browser is left to decide what to do in other cases, it could work out. But setting overflow-y to scroll will ensure a vertical scrollbar (in those browsers that support it) even if none is required, in which case it will be a disabled vertical scrollbar.

This might be a better approach:

<div id="loadarea" style="width: 500px; height: 300px; overflow:auto;">
This DIV will show my enlarged images!
</div>

The width and height dimensions constitute a base size, which you may configure as desired. Anything that exceeds that in either dimension will bring a scrollbar in that dimension. If the content fits the width or height, there will be no need for and no scrollbar in that dimension. If it fits completely, there will be no scrollbars at all.

[yazta]

Hi, I don't want the loading div to have scroll bars...I have alot of thumbnails so I want to place the thumbnails in a sort of frame (i think its called iframe) so that that frame will have a scroll bar to scroll through all the thumbnails...
what I done was to create another html file (thumbnails.html) and placed the thumbnails in there, and then in the original html file I wrote

<iframe class="borde" src ="thumbnails.html" frameborder="0" width="370" height="325"></iframe>

this worked (ie the scroll bars came up) but the thumbnails didn't show in the loading div in the original html file

<div id="loadarea" style="width: 250px; height: 365px"></div>

[yazta]

it says on the Script URL (on DD):

rev="loadarea"
In the above case, you're telling the script to load the enlarged image in the DIV (or some other element) on the page with ID="loadarea".

so according to that the script in thumbnails.html should find the page that has the div with ID="loadarea" and display the thumbnails in that div?...but it didn't work.

[jscheuer1]

Looks like both ddadmin and I misunderstood the question. For that, the script tag:

<script type="text/javascript" src="thumbnailviewer2.js" defer="defer">

/***********************************************
* 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
***********************************************/

</script>

would need to go on the page in the iframe, and this line in the script would need to be changed:

loadimage:function(linkobj){
var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any
var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr
var imageHTML='<img src="'+ima

to:

showcontainer=parent.document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in

There could still be problems. If so, try getting rid of the defer attribute:

<script type="text/javascript" src="thumbnailviewer2.js" defer="defer">

/***********************************************
* 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
***********************************************/

</script>

But you could use the script (with no changes) and thumbnails all on one page and instead of an iframe:

<td width="370" height="325" align="left">
<div style="width:370px;height:325px;overflow:auto;">
HTML for thumbnails goes here
</div></td>
<td width="250"><div id="loadarea" style="width: 250px; height: 365px"></div></td>

[yazta]

thanks a lot jscheuer1...it works!!!! brilliant