PDA

View Full Version : Image Thumbnail Viewer Script: add margin on the title?



lindemulder
08-27-2007, 07:31 PM
1) Script Title: Image Thumbnail Viewer Script

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

3) Describe problem:
No problem! As a matter of fact after working for at least a week on finding and implementing a solution that works on multiple browsers and was compact and easy...well...let me just say that I am very happy.

What I would like to do is set the title away from the side of the box slightly, about 5px would be good.

Here is the link where I have the test page and you can see the the text is directly butting up against the dark grey border; I would like to move it:
http://www.stateofjoyce.com/bigFatTest2.html

I thought about going into the js file, but that looked too scary. The last time I actually wrote my own js was in 1997 or something.

Thanks for the script!

jscheuer1
08-27-2007, 08:02 PM
That's a pretty non-standard way to use that script. You can probably get away with taking it a bit further. Put this style in the head of your page:


<style type="text/css">
.description {
padding-left:1ex;
}
</style>

Then you could do your link and thumbnail image like so:


<a href="images/art/0406_apple.jpg" rel="thumbnail" title="<div class='description'><em>Apple</em><br>
Oil on gallery canvas, 8&quot;x8&quot;.<br>Private Collection</div>"><img title="Apple - Oil on gallery canvas, 8&quot;x8&quot; - Private Collection" src="images/art/0406_apple_th.jpg" width="60" height="60" border="0"></a>

Notice that I have added a conventional title attribute to the image, this overrides the title for the link onmouseover, but still allows the script to use the link title for its description. The style in the head causes its added division to have a left-padding.

lindemulder
08-27-2007, 09:27 PM
Holy crap! I took too long to answer and now the nicely written one is gone...argh...

anyway I wrote a nice reply...and a wink with the comment you wrote about non-standard way to use the script because it's for images isn't it?...also that for the future DD might consider that for those using the Title attribute that a space be written into the code to begin with, that would be nice...

...all in all, I'm happy and will have my site (http://www.stateofjoyce.com) re-worked in a week or so (before school starts) and you're welcome to check out the non-standard way when it's ready if you like...

Thanks again!

ps
by the way...your solution worked. lol