Default Image, Prompt and Titles for Thumbnails

[sabreur]

1) Script Title: Thumbnail Viewer II

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

3) Describe problem: Script is working fine but I would like to add 3 enhancements:

a) A default image when the page loads - currently the loadarea is blank until the mouse hovers over a TN.

b) An "idiot prompt" telling visitors to hover over a TN to make it work. I have done this just by putting some text in the load area but it would be nice if this message disappeared after the first mouseover. Or is there some other script that will display for a fixed period?

c) I want a multi-line Title. I have done this by putting a <BR> in the Title field but the code shows up when the mouse is over the TN. Ideally only the first line should display with the TN.

[Schmoopy]

@ b) You could have something like this, I'm really bad at JavaScript but this should be simple enough, add this in the head section:

<script type="text/javascript">
function HidePrompt(id)
{
var instructions = document.getElementById(id)

instructions.style.display = "none"

}
</script>

Then you'd add this to the HTML:

<div id="prompt" style="display:block;">
Your prompt here, to tell users what to do
</div>

<img src="image1.jpg" onmouseover="HidePrompt(prompt);"/>

Hope this helps, this is probably a really long winded version of what I suppose is pretty simple and please feel free to put up a much shorter version of this ^^

Edit: Also, please fix your link above - it doesn't work at the moment.

[jscheuer1]

OK, now whatever you put in the loadarea will be wiped out once the user starts activating the thumbnails. So put a default image in there if you like, and a caption below it telling folks to click on the thumbnails:

<div id="loadarea" style="width: 600px">
<img src="my_default.jpg" alt=""><br>
Click on The Thumbnails to See Larger Versions Here.
</div>

That should take care of a and b.

For c, you are already half way home. If you give the thumbnail image a title, it will override the link title for the mouseover 'tool tip' of the thumbnail image, ex:

<a href="bulb.gif" rel="enlargeimage::mouseover" rev="loadarea" 
title="My long title with<br>a line break"
><img alt="thumbnail image" 
title="My short title" src="bulb_tbn.gif"></a>

[sabreur]

@ b) You could have something like this, I'm really bad at JavaScript but this should be simple enough, add this in the head section:

Edit: Also, please fix your link above - it doesn't work at the moment.

Thanks for the help, but I am going to go with Jschuer1's suggestion as it looks simpler.

I've fixed the link. (I should have tested it before I copied it, sorry!)

[sabreur]

OK, now whatever you put in the loadarea will be wiped out once the user starts activating the thumbnails. So put a default image in there if you like, and a caption below it telling folks to click on the thumbnails:

Snip...
title="My short title" src="bulb_tbn.gif"></a>[/CODE]

I might have stumbled on the your prompt idea but for the fact that I have the gallery in a table and put the prompt outside the loadarea DIV so it didn't get overwritten.


What I wanted to do with the TN Title was to have it appear underneath the thumbnail.The ALT title is really superfluous in this case which, I guess is why it was left out.

I have now done this by adding Title text after the viewer declaration.

It is all going swimmingly, thanks.

Next problem is to load all the data for the images (I've got over 100!) from an external file so I can update everything easily, any ideas?

[jscheuer1]

If you have PHP, asp, or another server side language available, that would be the way to go for that, as the thumbnails being present on the page with their links to the larger images is a convenient non-javascript fall back. In a case like that, clicking on the thumbnail will allow the user to see the larger image alone in the window, and the browser's back button would return them to the page of thumbs.

Failing that, javascript could be used to construct a layout of thumbnails from an array, but that would leave non-javascript users with nothing to see or do as regards the gallery.