Results 1 to 3 of 3

Thread: Image Thumbnail Viewer Script: add margin on the title?

  1. #1
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image Thumbnail Viewer Script: add margin on the title?

    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!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <style type="text/css">
    .description {
    padding-left:1ex;
    }
    </style>
    Then you could do your link and thumbnail image like so:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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 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
    Last edited by lindemulder; 08-27-2007 at 09:29 PM. Reason: added ps

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •