Creative Commons License
This work is licensed under a Creative Commons License.

Javascript Photo Gallery

Overview

Note: The admin editor, a wizard-like page for adding and maintaining images, is in beta now. It's linked at left, under tools, as gallery editor.

Features & Benefits

  1. Automatically generated thumbnail grids
  2. Slideshow
  3. Keyboard shortcuts
  4. For slow servers only the images are fetched for each user request -- thus faster downloads
  5. Caches images
  6. Polite "loading" message while images are fetched. Does not attempt to display an image before it has been downloaded
  7. Configurable thumbnail grid: you choose the number of rows and columns, the script generates the page links
  8. "All" reveals all thumbnails on single page
  9. Extendable: you control what is shown, plus 4 "extra" fields of data you use any way you please
  10. Callback functions allow you to customize behavior as user navigates through the images
  11. Specify your thumbnails sizes
  12. Thumbs may be portrait or landscape
  13. URL support means it's safe to directly link to images by either file name or image index
  14. Display file names and image captions.
  15. Include Titles on your pictue and even in the thumbnails.
  16. Configurable. Image and thumbnail directories can be anywhere or even the same (thumbnails are the images, just resized)
  17. Works as all-on-one-page gallery or thumbnails-to-single-image-detail
  18. Pure JavaScript -- no databases or server languages (PHP, CFML, etc) mean your gallery is portable to ANY webserver as fast as you're able to ftp files across

Downsides

  1. Might be redundant- your hosting service may have a nifty PHP gallery
  2. JavaScript must be enabled
  3. JavaScript isn't run by Google or most web crawlers -- if you want your images indexed you'll need to use the extra-step of the Google key
  4. No web-interface admin. This isn't auto-magic, you've got to size your images and thumbnails and you've got to upload them
  5. You do need to type some simple JavaScript (all programmers say it's simple, and this really is, but if you are terrified of seeing a few lines of HTML or JavaScript, this isn't for you)

top of page

New Features in 2.3 Release

This is more of a maintenance release. No new features.

  1. Reduced number of "global" variables by switching to a pbtsImg object.
  2. Enforced naming conventions..

top of page

How to use this/getting started

Two approaches to using this script have emerged the clear favorites over all others:

  1. Example 1: Single Page for Images and Thumbnails (instructions | demo)
  2. Example 2: Thumbnail Page Links to Separate Image Page (instructions | demo)

Though I have found other uses (the Sundance Film Festival photos being one) these are the only two I'll be explaining.

The first method, the single page method, is by far the most common. It has the advantage of being only one page (duh), is faster to setup (assuming you have some methodology to your site management -- Dreamweaver Templates cannot be undervalued for tasks like these Photo Galleries), and seems to be quite popular with site visitors. The second method is well suited for cases where there are lots and lots of images and the thumbs are of servicable size such that vistors browse large numbers of them quickly. Also, if the final image is quite large this might be the best approach.

I've only written one tutorial so far, for the single page gallery. Before reading how to do this please take a moment to play with one of the many photo galleries here on pizza that use this script (Zinneke Parade (in Brussels) Photos).

OK. So you know what we're shooting for, let's get going. (Note: a completed working version of everything discussed is included at the bottom of the this page, so if you're the type that likes to reverse engineer and not read instructions, that is, if you are like me, jump down there and copy the files to your computer)

Go To Single Page Tutorial
Go to Two Page Tutorial (hah, not ready)

top of page

Support

So far there are no known issues with various browsers. See chart.

BrowserKnown Issues
Internet Explorer 5.5/6 no known issues
Mozilla 1.7xx no known issues
Firefox 1.0-2 no known issues
Netscape 7.x no known issues
Safari unknown
Konqueror unknown
Camino unknown
WebCollage (PDA/Phone) unknown - ask Kent

Contact me through PizzaByTheSlice.com if you encounter a serious problem.

top of page

Revisions

In jotting down these notes several rough edges surfaced, the result of code that evolved from its one-off roots to a useful tool. Few vestigial bits of that original project remain, taunting me, and where appropriate changes are made. Funny how this turned from merely documenting to cleaning-up.

DateVersionChange
8 Mar 07 2.3.1 Added "link" aka "permalink" element id to auto-emit complete link to the current image. Ex: will add, via innerHTML, this: <a href="http://mywebsite.org/photos.htm?file=my-puppy-pic.jpg">link</a>

Use by adding a region to your page, such as:
<p id="my_link_spot"></p>
then include this in your gallery setup javascript:
setElementId( "link", "my_link_spot" );

Jan 10, 07 v2.3 Figured minor house-keeping was in order. I've been using this version for a while, just making it public.
  • Replace the 8 or so arrays where I'd been keeping the Image info with a single array, why? see next point.
  • Now uses object "pbtsImg" for passing around info. Seemed cleaner, but is a departure from earlier versions. Has what I hope are intuitive properties "src", "descr", etc..
  • Followed my own naming standards: within a function identifiers are no longer burdened with "l_" (local, yeah, dumb). Function parameters are all "p_" and globals are all now "g_"
  • Added new getValue option, "image", which returns the specified (or current) pbtsImg object.
  • N
07-06-05 2.2.7 bug: disabling the thumbnail index links by setting the ElementId blank (setElementId( "pages", "" );) generated a Javascript error
03-08-05 2.2.6 two bugs: fixed JS error occurring when description element id was blank (i.e. for some dumb reason I forgot to make this one field optional). in rendering thumbnails the empty cells were not the correct dimensions if the default measurements were portrait instead of landscape
02-10-05 2.2.4 overlooked function added: toggleSlideshow
02-02-05 2.2.3 bug fix: timing of callback function was not correct for cached images. fixed.
01-27-052.2.2addImg90 function added, why did i wait so long?
01-25-05 2.2.0 - 2.2.1 renamed initGallery to writeGallery, an unfortunate initial name choice. added ALL to navigation.
01-22-052.1.9 Rollup of revisions from 2.1.1 - 2.1.9:
  • fixed keyboard event handler
  • added getValue
  • added Titles and setThumbTitles switch
01-18-052.1.0another backwards compatibility break: cleaned up the way the gallery is initialized
01-18-052.0.5cleanup, added sseparate style support for empty thumbs
01-14-052.0.4set default image dimensions
01-14-052.0.3generate list of images for google searches
01-06-052.0.2URL parameter validation and file name handling
12-31-042.0.1keystroke 0-9 handlers
12-28-042.0.0end backwards compatibility by using Element ID for pic
12-12-041.3.3keystrokes and slideshow
12-04-041.3.2
  • For single pages the page navigation rewrites the thumbnails and navigation rather than calling the page.
  • File info option
12-01-041.3.1Added single page ability and "loading"
03-17-041.2.2Added wrap.
~20001.0.0First JS gallery to replace ColdFusion Gallery when transfered hosting. Lots of browser incompatibilites.

top of page

Terms of Use

If you work for Disney or General Mills or some other huge company send buckets of money. If you don't, well, use and modify this under the Creative Commons agreement (see below) -- which means pretty much "have at". If you want to link to my site, cool, thanks. If you want to pay me -- well, that'd be a bit wierd and we don't really think you're gonna do that, but it's really, really cool that you even thought about it. So go have fun, hope this helps you go home early tonight.

Creative Commons License
This work is licensed under a Creative Commons License.

top of page

Download

Current Version (2.2.7) includes editor: JSPhotoGallery.zip (was 130K now 530K, sorry, it's the stupid example images)

Prior Versions:
PhotoGallery_v2_2_6.zip (109K)
PhotoGallery_v2_2_3.zip (105K)
PhotoGallery_v2.1.0.zip (64K)

Zip includes script and demos from these pages, with sample images.

top of page

 

Script from PizzaByTheSlice.com. Visit the Javascript tips for instructions and latest version.