Image Thumbnail Viewer II

[suwii]

Script: Image Thumbnail Viewer II
http://www.dynamicdrive.com/dynamici...thumbnail2.htm

I was wondering how do you actually change the text into thumbnails and how to align it right?

[suwii]

i fiddled around with it so i know how to get the thumbnail in now how about shifting the 'mouse over image' to the right like in the example/demo?

[jscheuer1]

DD's demo page for this script uses a small (one row, two columns) table to achieve that layout, here is the relevant source code from the demo page (slightly modified for clarity's sake):

    <p align="left">Using conventional thumbnail images 
    and activated <b>onMouseover</b>:</p>
    <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>

[suwii]

thanks jscheuer1
now can i add several pages of this? (page 1,2 etc?)

[jscheuer1]

can i add several pages of this? (page 1,2 etc?)

Do you mean actual separate html pages with this script on it? Yes. If you mean two or more of the same script on one html page, No.

For clarity's sake the markup from my last post was only for the display portion of the script, you still need the code section of the script.

[suwii]

right i see!! what about if you wanted a little scrollbar where the thumbnails are to counter the problem of having lots of pictures? :P

[jscheuer1]

Then a markup like this will work:

    <table border="0" width="300" cellspacing="0" cellpadding="0">
      <tr>
        <td width="160" valign="middle" align="center"><div style="width:75px;height:100px;overflow:auto;"><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></div>
        </td>
        <td width="140"><div id="dynloadarea" style="width:140px;height:225px"></div>
        </td>
      </tr>
    </table>

There are a few critical parts. The blue values should be set to accommodate the width of the scrolling division with some room on either side for spacing in its cell and the width of the widest display image in the cell for that. The valign and align for the first td centers the scrolled content in the cell. The first two red dimensions govern the width and height of the scrolling division, the height should be less than the total height of all the thumbnails if displayed without scroll. The width should be a bit wider than a single thumbnail to allow for the width of the scrollbar but, not so wide as to take up the entire cell. The last two red dimensions should be set to the largest width and largest height of the widest and the tallest (respectively, if these turn out to be two different images) display image(s) in your collection. A nice touch (if using various sized large images) would be to set the the display td's valign="middle" and align="center" as well.

[suwii]

that's awesome!! it works a treat!!