This work is licensed under a Creative Commons License.
Javascript Photo Gallery
Overview
- Features & Benefits (plus the Downsides)
- New Features in 2.2 Release
- How to use/getting started
- Example 1: Single Page for Images and Thumbnails (instructions | demo)
- Example 2: Thumbnail Page Links to Separate Image Page (instructions | demo)
- Support
- Revisions
- Download
- Terms of Use
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
- Automatically generated thumbnail grids
- Slideshow
- Keyboard shortcuts
- For slow servers only the images are fetched for each user request -- thus faster downloads
- Caches images
- Polite "loading" message while images are fetched. Does not attempt to display an image before it has been downloaded
- Configurable thumbnail grid: you choose the number of rows and columns, the script generates the page links
- "All" reveals all thumbnails on single page
- Extendable: you control what is shown, plus 4 "extra" fields of data you use any way you please
- Callback functions allow you to customize behavior as user navigates through the images
- Specify your thumbnails sizes
- Thumbs may be portrait or landscape
- URL support means it's safe to directly link to images by either file name or image index
- Display file names and image captions.
- Include Titles on your pictue and even in the thumbnails.
- Configurable. Image and thumbnail directories can be anywhere or even the same (thumbnails are the images, just resized)
- Works as all-on-one-page gallery or thumbnails-to-single-image-detail
- 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
- Might be redundant- your hosting service may have a nifty PHP gallery
- JavaScript must be enabled
- 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
- 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
- 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)
New Features in 2.3 Release
This is more of a maintenance release. No new features.
- Reduced number of "global" variables by switching to a pbtsImg object.
- Enforced naming conventions..
How to use this/getting started
Two approaches to using this script have emerged the clear favorites over all others:
- Example 1: Single Page for Images and Thumbnails (instructions | demo)
- 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)
Support
So far there are no known issues with various browsers. See chart.
| Browser | Known 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.
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.
| Date | Version | Change |
|---|---|---|
| 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:
|
| 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.
|
| 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-05 | 2.2.2 | addImg90 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-05 | 2.1.9 | Rollup of revisions from 2.1.1 - 2.1.9:
|
| 01-18-05 | 2.1.0 | another backwards compatibility break: cleaned up the way the gallery is initialized |
| 01-18-05 | 2.0.5 | cleanup, added sseparate style support for empty thumbs |
| 01-14-05 | 2.0.4 | set default image dimensions |
| 01-14-05 | 2.0.3 | generate list of images for google searches |
| 01-06-05 | 2.0.2 | URL parameter validation and file name handling |
| 12-31-04 | 2.0.1 | keystroke 0-9 handlers |
| 12-28-04 | 2.0.0 | end backwards compatibility by using Element ID for pic |
| 12-12-04 | 1.3.3 | keystrokes and slideshow |
| 12-04-04 | 1.3.2 |
|
| 12-01-04 | 1.3.1 | Added single page ability and "loading" |
| 03-17-04 | 1.2.2 | Added wrap. |
| ~2000 | 1.0.0 | First JS gallery to replace ColdFusion Gallery when transfered hosting. Lots of browser incompatibilites. |
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.
This work is licensed under a Creative Commons License.
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.