Advanced Search

Results 1 to 5 of 5

Thread: Text appears when clicking on image

  1. #1
    Join Date
    Mar 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool Text appears when clicking on image

    Hi there. I would really appreciate some help.

    I have an image gallery already set up.
    However, when someone clicks on the thumbnail I would like to have the title of the image appear under the enlarged version. It is just your normal run of the mill gallery viewer (http://www.a-p-s.org.au/edidgallery1.html)

    At present I have the names of the images permanently there, but I would prefer to remove that and just have the names appear when the image is displayed.

    Thank you.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    OK, change your doPic() function to:

    Code:
    function doPic(imgName, theText) {
    if (ns3up || ie4up) {
    imgOn = ("" + imgName);
    document.mainpic.src = imgOn;
    if (document.getElementById&&typeof theText!=='undefined')
    document.getElementById('maintext').innerHTML=theText
    else if (document.getElementById)
    document.getElementById('maintext').innerHTML=''
       }
    }
    Change the 'landing area' HTML to:

    HTML Code:
    <td colspan="5"><img src="images/writing.gif" name="mainpic" id="mainpic"/><div id="maintext" style="text-align:center;font-size:.75em;margin-top:3px;"></div></td>
    Use this type of syntax for the thumbnail links (this is an actual working example for your first thumbnail):

    Code:
    <a href="images/ediddiv/1/large/d1.jpg" onclick="doPic(this.href, '&#8220;Golden Hills#1&#8221;<br /><span class=\'hilite\'>Anne Specht</span>');return false;"><img src="images/ediddiv/1/thumbs/d1.jpg" alt="At The End" border=0 /></a>
    Notes: doPic() now accepts two parameters. doPic(imgName, theText). You can still use your old thumbnail links as doPic() will detect if there is no text and display none in those cases. I switched the image to the href attribute so that non-javascript enabled browsers will be able to see the large image loaded into the window and can use their back button to return to the gallery.
    Last edited by jscheuer1; 03-16-2006 at 05:10 AM.
    - John
    ________________________

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

  3. #3
    Join Date
    Mar 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you for this however I would prefer that the gallery stay on the same page rather than having to go to another window.
    With the help of another guru I now have this:

    http://members.optusnet.com.au/~g.me...dgallery3.html

    However it does not work in Mozilla and I wouldn't have a clue with Mac users.

    The other guru has seemed to have disappeared, do you have any more ideas?
    Thanks again.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,681
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by aps
    Thank you for this however I would prefer that the gallery stay on the same page rather than having to go to another window.
    I think you misunderstand. The gallery cannot remain on the same page without javascript and still show the larger images. That would be a rare case though. Generally, it will be the same as what you have now, just with captions for the large images. Try the code, I think (if you install it correctly) you will like it. It worked locally with an exact copy of your page on my computer in IE, FF and Opera. If you have problems, let me know, I can put up a demo for you and, if you publish your work in progress to the web, I can troubleshoot it if need be.
    - John
    ________________________

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

  5. #5
    Join Date
    Mar 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your help. I really appreciate it.

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
  •