Image Thumbnail Viewer II + text ?

[nephelys]

1) Script Title: Image Thumbnail Viewer II

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

3) Describe problem: Hi everybody !
first of all, thanks a lot for all those ressources, amazing ! you guys did a great job, and I'm sure a lot of people appreciate that ! so thx !

So, the script is working perfectly but to have a better result, I would like to put some text just next to the enlarged picture, as a description. So I'd like this text changes as soon as I click on a new picture, with its respective description ..

So my question is : should I use the option "title" ?
if yes, is it possible to put an attribut to this title to get my text in a special div ?
If no, how can I get an extra text in a special div next to my picture ?

thank you for your help ! (sorry about my english, I'm not )

[azoomer]

I tried this and it looks like it could work

<a href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" 
rel="enlargeimage" rev="targetdiv:loadarea" 
title="<div class='specialdiv'>The Universe is just waiting to be explored</div>">
<img src="thumbnail.jpg" width="31" height="31" alt="thumb" /></a>

and some css for the specialdiv

.specialdiv {
background-color:#E8E8E8;
width:400px;
height:60px;
margin-top:10px;
padding:10px;
}

It only works with single quotes around the specialdiv class name ( marked in red). I don't know if it is correct to do it this way though.

Edit: I have just realized that doing this makes the div and class markup appear in the title tooltip when hovering over the link and that doesn't look too good, so I wouldn't recommend this approach anyway.

[nephelys]

hummmm doesn't work for me but thx for having tried !
the title stays where it was at the beginning, and doesn't go in my "special div"
I've tried with "targetdiv" int the "title=" .. without success ....

here is my work , if you want to see exactly what I want

HERE

check at the bottom, in the viewer. I'd like the text just next to it changes...

[azoomer]

This will not make the text go into another div that you have already, but you can move it with css like margin-left: 400px; margin-top: - 200px; and so on. This way you can place the text where you want it, even overlapping another div if that's what you need.
But okay there may be a smarter way to do that i am not aware of.

[nephelys]

I'd prefer something in my div, and a solution without the title should be much better ... but is it possible ? =)

[nephelys]

up please

[nephelys]

please please please people, I'm desperate, and definitly too beginner to find by myself

[jscheuer1]

OK, use this modified version of the script (right click, 'save as'):

Attachment 3422

This accomplishes two changes:

1. It no longer uses the title attribute for the description. Now it's the name attribute.
   
   
2. If you specify a description id in the rel attribute (see below), and have a division with that id, that's where the description will show up. Otherwise it will be as before, showing up in the same div as the image.

So you can do like:

<a href="some_image.jpg" rel="enlargeimage:descarea" rev="targetdiv:loadarea,trigger:click" name="The Universe is just waiting to be explored">Saturn #1</a>

The only real changes are highlighted. descarea is the id of the separate description area. You may use any valid unique id here. In this example you would want a division on the page like so:

<div id="descarea"></div>

If you have that, that's where the description (from the name attribute) will show up. You may style this division any way you like and place it wherever you like in your layout.

But, looking at your page I see that might be a bit cumbersome, a lot to fit into the name attribute of a tag. So with this update you can use an alternative method. Instead of putting the description in the name attribute, use a keyword, ex:

<a href="some_image.jpg" rel="enlargeimage:descarea" rev="targetdiv:loadarea,trigger:click" name="saturn">Saturn #1</a>

Now, doing just that would simply change the description from:

The Universe is just waiting to be explored

to:

saturn

But if you also set up a script in the head:

<script type="text/javascript">
var descarea = {
	isthumbnailviewer2descs: true, //required
	saturn: '<b>Saturn</b> is the second largest planet in our solar system.',
	moon: '"The moon is a harsh mistress."' // <-- no comma after last entry
}
</script>

Where descarea is the same word you used to define the separate description division's id, and saturn is the keyword you used, you will get:

Saturn is the second largest planet in our solar system.

Any questions, feel free to ask.

[nephelys]

Thx John !!

just perfect !!! exactly what I needed

thx again !

[jscheuer1]

Works fine for me.

Perhaps you need to clear your browser's cache.

I noticed two things though:

• The loading image is missing.
  
  
• Without a valid URL DOCTYPE, IE is showing the page in quirks mode, not pretty.