Adding Text Below Enlarged Images

[angel1]

1) Script Title: Adding Text Below Enlarged Images

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

3) Describe problem: Using Dreamweaver 8 to build my site. Using JS Query thumbnail viewer 2 for my thumbnail scripts.

I did not want captions where my mouse hovers over the thumbnail. It was recommended to me to change the "title" attribute to "info". This is how it was configured:

<a href="http://www.loftmidcentury.com/arco lamp 4.jpg" info="This is some product information!" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade"><img border="0" src="http://www.loftmidcentury.com/arco lamp 4.jpg" width="91" height="91"></a><br/>Arco Lamp

There are no captions when I hover over the thumbnail but I would like to have text appear the enlarged images for product description.

[jscheuer1]

As far as I know, info isn't a valid attribute in any DOCTYPE. Starting with HTML 5, the data hyphen attribute is, example:


<a href="http://www.loftmidcentury.com/arco lamp 4.jpg" data-info="This is some product information!" rel="enlargeimage" rev="targetdiv:loadarea,trigger:mouseover,preload:yes,fx:fade"><img border="0" src="http://www.loftmidcentury.com/arco lamp 4.jpg" width="91" height="91"></a><br/>Arco Lamp

Whatever you use though the script needs to pick it up. One way to do that would be to edit the script (thumbnailviewer2.js) at around line #21 we see:


imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'

So let's say we're using data-info as I suggest. In that case we can change the above line to (changes highlighted - two places, scroll the code block to see the second one):


imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('data-info')!='')? '<br />'+$anchor.attr('data-info') : '')+'</div>'

To do this you need to use a text editor. NotePad is fine. Or if you have another text editor that you like better, use it. Just open the thumbnailviewer2.js file with the editor, make the change and save the file.

[angel1]

Hi john,

originally i used thumbnail viewer from DD and was asking for more assistance because my codes were all over the place but got no reply so i used a script from another forum which suggested jsquery. the person assisting me has gone above and beyond to help me so as to not be insulting i am deciding to continue using the script they've suggested. but because of their limited time i've tried to learn on my own but was unsuccessful so i am asking others to assist as well. i have sort of a deadline and don't want to pressure anyone.

I'm still learning about scripts but i still wish to use what i have already. my apologies for the time you've taken to reply. i appreciate it greatly and don't mean to offend. is there a way for me to acheive text under my enlarged thumbnails WITHOUT HAVING CAPTIONS using what i'm using now?

[angel1]

my apologies john.

i didn't read completely what you've suggested. i will attempt your suggested and test using the thumbnail viewer i already have (from jsquery).