Dreaded Thumbnail Viewer II

[srmistry]

1) Script Title: Thumbnail Viewer II

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

3) Describe problem:
I've looked on the forums at other newbies experiencing similar issues but can't figure out where I'm going wrong!! Ponygirl's thread was very similar...but I don't see how..doh!

E.g. using just one text entry as an example...

<a href="images/gallery/candlecake.jpg" rel="enlargeimage::mouseover" rev="loadarea::" title="This is an example">Thumbnail Example 1</a><br />

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

Bit I understand...
1. href == link to the large image
2. rel == states to make the image larger when mouseover selected
3. rev == specifies to load the larger image in the div specified

Bits I don't...
1. Do I need to create the smaller thumbnail images? I didn't think so.
2. How can I get a simple small image link to appear larger on the Same page when user moves the mouseover (i.e. mouseover)? Like the example in the DD page ...

An example would be great!

I think the sample code needs to be corrected to reflect image thumbnails.

Cheers,

Sanj

[jscheuer1]

You really do need to have separate thumbnail images for this script to work well with smaller and larger versions of the same image:

<a href="large_1.jpg" rel="enlargeimage::mouseover" 
rev="loadarea"><img src="small_1.jpg" border="0"></a>

[srmistry]

Thanks John.

I will give that a try!

B Rgds,

Sanj

[srmistry]

John,

Sorry for the delay.

I made the changes as stated, and created the thumbnails. Then, tried the code - and indeed the links from the small thumbnails do open the larger image.

However, the larger image appears on a new page, not the same page (in the DIV).

Note 1: The thumbnailviewer2.js script is in images dir.

Note 2: I used the same sample image (small image in thumbnails and larger in gallery directory). Also, table has been created.

Note 3: I have used a table to help control the formatting, but even without this, the image still open a fresh page.

<td><a href="images/gallery/xmascake.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img src="images/thumbnails/xmascake.jpg" width="72" height="72" border="0"></a></td>
<td><a href="images/gallery/xmascake.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img src="images/thumbnails/xmascake.jpg" width="72" height="72" border="0"></a></td>
</tr>
<tr>
<td><a href="images/gallery/xmascake.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img src="images/thumbnails/xmascake.jpg" width="72" height="72" border="0"></a></td>
<td><a href="images/gallery/xmascake.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img src="images/thumbnails/xmascake.jpg" width="72" height="72" border="0"></a></td>
</tr>
<tr>
<td><a href="images/gallery/xmascake.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img src="images/thumbnails/xmascake.jpg" width="72" height="72" border="0"></a></td>
<td><a href="images/gallery/xmascake.jpg" rel="enlargeimage::mouseover" rev="loadarea"><img src="images/thumbnails/xmascake.jpg" width="72" height="72" border="0"></a></td>
</tr>
</table>

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

<h2 />

<div id="loadarea2" style="width: 550px"></div>



Many thanks!

S

[jscheuer1]

Note 1: The thumbnailviewer2.js script is in images dir.

It probably should be in the same directory as the page. But it is hard to say because it depends upon how you have its script tag's src attribute configured in the head of the page, and you haven't shown that.

Please post a link to the page on your site that contains the problematic code so we can check it out.