Thumbnailviewer2: create additional command to set caption in specific div?

[munya]

1) Script Title: Thumbnailviewer2

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

3) Describe problem: I would like to create an additional command which tells each thumbnail to send a caption to a specific div id on mouseover. It would be similar to what the script is doing already: sending a command from each thumbnail to a larger image on mouseover, except it would be for text, and it would be in addition to this command. I know the script allows for a "title" to be inputted, but it only lets you display it under the image, and it can't really be styled. A friend of mine has a hunch that what needs to be done is find a javascript function that sets an element based on its id? Help!

Here is a link to a page that I'm working on. The caption is in the bottom right corner of the page, and the image is on the left.

http://corakim.webs.com/dolls.html

[ddadmin]

One approach is to modify the script so the title attribute of the image, apart from being shown beneath the enlarged image, is also shown inside a specific DIV of your choice on the page. To do this, inside the .js file, add the additions in red:

if (description!=""){ //Use title attr of the link as description?
imageHTML+='<br />'+description
document.getElementById("mydesc").innerHTML=description
}

This assumes "mydesc" is a blank DIV on your page with that ID.

[jscheuer1]

Or more to the point, in this case I think, instead of being shown beneath the enlarged image:

if (description!=""){ //Use title attr of the link as description?
document.getElementById("mydesc").innerHTML = description;
}

Which (as in DD's version) will show the description in a division with that id anywhere on the page, example HTML code for that division:

<div id="mydesc"></div>

The only difference being that with my suggestion the image itself will not have a description showing directly below it.

[munya]

Thank you so much! That worked perfectly! The only thing that I'm kind of being finicky about...(although it is really a minor detail) is that by using the title attribute you also get a little yellow boxed caption that pops up next to the thumbnail if you hover your mouse over it long enough. Is there a way to hide that box?

[jscheuer1]

For most browsers, yes. Put an empty title attribute for the thumbnail, ex:

<a title="Neat Doll, some stuff about this doll" class="thumbs1" href="/dolls/doll640x433.jpg" rel="enlargeimage::mouseover" rev="image">
<img title="" src="/dolls/doll.jpg" alt="" width="50" height="50" /></a>

[jimmybongo]

I'm also trying to add captions to my enlarged photos using the thumbnailviewer2.js file. I added the segments of code posted here, but something tells me I don't have all of the code... :/

Any help would be great.

Thanks

[jimmybongo]

Nevermind! I'm stupid! I got it haha

Thanks anyway :P

[heidipeyser]

I need the same help that the other folks in this post needed, only I can't figure out where the modified code goes because according to the documentation the code was rewritten since this solution was posted and thus I'm lost as to my point of entry. please help.

[doriggidy]

I know this is an older thread, but I do need this solution as well. But looking through the code it seems like the code has changed since the solution was posted. Is that so? If so how could this be done with the newer code? Or am I just missing something?

[bernie1227]

Please start a new thread for this question.