thumbnail viewer

[masquerade]

1) Script Title: I need help with the Image Thumbnail viewer II
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Describe problem: I don't see the thumbnails in the thumnails but I see Thumbnail Example 2 as a link instead so what am I doing wrong
and I was wondering can I display the thumnails horizontally instead and if so how

[Veronica]

To display horizontally, just eliminate the <br /> between the thumbnails.

As for why it's not displaying correctly, I'd guess that you accidentally deleted a tag or bracket. If you provide ta link to your site, showing the problem, we could see what's wrong.

[masquerade]

I still didn't apply it to my site ,I only previewed it .when I viewed it instead of the images of the thumbnails it had "thumbnail example 1" and so on . plus I tried removing the </B> it worked on my angelfire site but not on my geocities site which my main site .

[jscheuer1]

Geocities is notorious for breaking scripts. If that is the problem, I'd suggest finding another host. Give us a link to the problem page on Geocities.

About the:

"thumbnail example 1" and so on

bit, I'm not sure I understand. But, the HTML markup will display whatever you put there. If you have like:

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

It will show:

Thumbnail Example 1

If instead, you have:

<a href="some.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="This is an example"><img src="somethumb.jpg" border="0"></a>

It will show the image - somethumb.jpg (if it is available to the page).

[spkennedy3000]

Thanks very much to jscheuer1...

Just the info I was looking for.

Is it possible to have the image that activates the thumbnails appearance as a rollover image, or to set the thing that activates the thumb to be a div that contains a rollover image?

I am a total newbie to this but have managed to follow so far. I would very much appreciate if anyone could help.

Thanks,

Simon

[jscheuer1]

Well there are many ways to do rollovers, most are pretty needlessly complicated IMO. The most basic rollover is:

<img src="some_thumb.jpg" onmouseover="this.src='some_other.jpg';" onmouseout="this.src='some_thumb.jpg';" border="0">

It's always a good idea to preload the rollover image(s) - the onmouseover ones. And, this effect works best with small images. Small in byte size. The above can easily be combined with a link from this script:

<a href="some.jpg" 
rel="enlargeimage::mouseover" rev="loadarea" 
title="This is an example"><img src="some_thumb.jpg" 
onmouseover="this.src='some_other.jpg';" onmouseout="this.src='some_thumb.jpg';" 
border="0"></a>

To preload a given image, put this in the head:

<script type="text/javascript">
function preload_it(img){
var i=new Image();
i.src=img;
}
preload_it('some_other.jpg');
</script>

You only need the red part once, the green part may be repeated as many times as needed, each with a different image file.

[spkennedy3000]

Thanks very much for your help again John. That is perfect.

May I just ask one more thing:

The Dynamic Drive Thumbnail Viewer II site makes reference to how you can add "an optional fading transition can be applied to the enlarged image when it's shown"

But the code below the above statement does not seem to do anything when I add it.

Is there something simple I am missing?

Your help is massively appreciated!
Simon

[jscheuer1]

In what browser? That part (as noted) only works in IE 5.5+ (and, not as noted, probably only on the PC, not Mac). There is also a place in the script where it can be disabled:

// -------------------------------------------------------------------
// Image Thumbnail Viewer II- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: Feb 5th, 2007
// -------------------------------------------------------------------

var thumbnailviewer2={
enableTitle: true, //Should "title" attribute of link be used as description?
enableTransition: true, //Enable fading transition in IE?
hideimgmouseout: false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)

/////////////No need to edit beyond here/////////////////////////

iefilterstring: 'progid:DXImageTransform.Microsoft.GradientWi . . .

although, by default, it's turned on there. If you need more help with this feature:

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

[spkennedy3000]

John,
As you note, it only works in IE.

Here is a link to the site for your (potential) interest.

Thanks again for your help.

Simon

[jscheuer1]

John,
As you note, it only works in IE.

Here is a link to the site for your (potential) interest.

Thanks again for your help.

Simon

What link?