JavaScript Image Gallery

by Jeremy Keith

87 Reader Comments

Back to the Article
  1. Hi, this may be really simple, but I was wondering if it’s possible to either make the image or caption a link?  If so, an example would be greatly appreciated!

    Copy & paste the code below to embed this comment.
  2. Frankly I don’t care about people calling my design bad anymore. People like you don’t visit my site, anyway. My site was aimed at people looking for info on San Francisco History, which flowed smoothly. Maybe that failed, but I’m fixing it. So go ahead and sue me for trying to help people.

    Copy & paste the code below to embed this comment.
  3. Ian, just wanted to express my (belated but still very) sincere thanks to you for figuring out what was wrong with my script there.

    Your suggestions worked perfectly, and they taught me a lot of valuable stuff about JavaScript and the DOM. Thanks many bunches.

    Copy & paste the code below to embed this comment.
  4. I don’t help people. I give maymay a lot of advice, even though I didn’t solve it. And no thank yous.

    Just kidding.

    Copy & paste the code below to embed this comment.
  5. Awesome script! Just what I’ve been looking for.

    I’ve been trying to figure out where I can add a bookmark tag somewhere on this script, so whenever I click on an image it will display <image.jpg> and also make a call to the bookmark on the page.

    Thanks first.

    Copy & paste the code below to embed this comment.
  6. I think this is a great little script.  I was just wondering if it would be difficult to make the image that javascript intercepts a link to a larger image.  So,  when I click on the text link it shows the preview, and then when the preview is clicked (the link that javascript intercepts) it opens a larger version of that image in a new window. 

    thanks

    Copy & paste the code below to embed this comment.
  7. I applied the techniques in this article to an existing page, and I must have some simple puncuation in the code wrong (even though I cut and pasted most of it)

    Does anyone have a working sample of these gallery using image thumbnails? I may be able to get mine working by looking at someone else’s.

    Copy & paste the code below to embed this comment.
  8. Is it possibile to link the target image to a larger version of the image?
    Thanks

    Copy & paste the code below to embed this comment.
  9. Paul: I successfully executed using thumbnails on this site: http://summerinnbnb.com/haines.php

    An interesting note about the caption area… I found that if your placeholder text is say two lines long, and you replace it with a caption that’s 3 lines long you may run into issues with some browsers (Safari being one of them, didn’t test beyond that). The issue I ran into was that the third line gets cut off when you click on an image with a 3 line caption. I kinda had to hack to fix it – by forcing my placeholder text to be extra large, adding a few br’s and a non-breaking space.

    Copy & paste the code below to embed this comment.
  10. Is it possible to format the caption area at all, like adding a in the caption?

    Copy & paste the code below to embed this comment.
  11. Great article, thanks again ALA. I did find a problem in Safari though. If your images are not exactly the same size they will be stretched, matching the size of the largest image (I tried it with images of same height different widths, but assume the reverse is also true). I did not specify height or width in code (exactly the same as in the article) & it works fine in IE5.5 Win, Win/Mac Firbird/Firefox, and Camino. I did not change the javascript at all, just copy and paste from the article. I am running Panther 10.3.3, Safari 1.2.1.

    Copy & paste the code below to embed this comment.
  12. This may be a fairly basic problem for those with more experience, but being new to JavaScripting….

    What I would like is to have the caption provided not by the Title element, but instead along the lines of a PHP include?

    I guess pseudo-code for this would look something like this…

    01

    …where I assume myCaption would be a text string passed to a function within the JavaScript that would then display the contents of the file 01.txt.

    Is this sort of thing possible? Either code and/or pointers to resources/examples would be appreciated.

    Thanks for taking the time to write this article. Its been quite helpful.

    Brooks

    Copy & paste the code below to embed this comment.
  13. Hey Jeremy, thanks for that – very useful – and I even substituted thumnails for the text and it looks neat, but I found a problem….

    You say it works for IE 5+ (PC and Mac), but my version of IE (Mac 5.2.3) opens the larger images like they were a link to another page which means I lose all my lovely page formatting and I’m forced to use the back button.

    Any suggestions why it would do that?

    Copy & paste the code below to embed this comment.
  14. Love this script and would like to use it. It’s not working for me in Netscape 7.1, and I just went through all the comments here. None of the examples work in NS7.1 (except for Rebecca’s beads – absolutely beautiful, by the way!) Works fine in IE6 and Moz.

    Here’s my attempt:
    http://garfieldz.com/chgo2004-alagallerytest.html

    Here’s a screenshot. I want it to look like it does in IE:
    http://garfieldz.com/chgo2004-alagallery-screenshot.html

    Would appreciate some help! Thanks!

    Copy & paste the code below to embed this comment.
  15. My bad! There was a problem with my NS profile. AOK now. Love the script! Thanks!

    Copy & paste the code below to embed this comment.
  16. I also love this image gallery. I really need these previous / next buttons though. I thought maybe this can be accomplished using a bit of javascript and using display:none? Or changing the Z-index using javascript? Does anybody know how to do that?

    Copy & paste the code below to embed this comment.
  17. Please only use the following browsers in your comparisons.

    IE 6.1 (fully patched)
    Opera 7.5b/7.23
    Mozilla 1.7b
    Firefox 0.8
    Safari (1.2)

    In case you didn’t know IE 3,4,5, Netscape 4,4.6,4.08,6 are obsolete so let’s not say i hope it can work in any of them.

    Are we ever going to move forward. I might as well bring out my betamax video machine so i can watch the latest Matrix dvd disc on it, watch me start crying when i can’t insert the disc.

    Copy & paste the code below to embed this comment.