[ code ]

PicPopper

PicPopper is a little JavaScript library I use to improve the UI of my static photo albums.

Here is an example, clicking on any of the thumbnails should pop up a window with an enlarged version of the picture. Click on the picture to view the next one, or the other links to do other fun things. The keyboard arrow keys also do clever things.

Links

• PicPopper.js (current version)
• The same album as above, stripped to the bare essentials.
• The source for the stripped version.

• My testing sandbox

Who is this for?

PicPopper is meant for anyone maintaining old-fashioned static image libraries, who wants a slightly nicer UI without having to migrate the whole collection to a new system.

Alternately, PicPopper is for:

• People with really cheap static-only hosting plans
• Old-fashioned Unix geezers who don't like PHP and databases
• Stubbornly independant people who refuse to move to Flickr/Facebook
• People concerned with performance (serving static content is fast)
• Geeks looking for "Web 2.0" photo albums which are easy to customize
• People who get frustrated browsing others' old-fashioned photo albums.
• Me

Ok, how do I add it to my web-site?

1. Have web pages linking to images (a photo album). Note that you have to make thumbnails yourself if you want them.
2. Copy PicPopper.js to your site.
3. Cut'n'paste the Javascript code from the top of the sample album to the head-block of your album's HTML. Be sure to update the URLs so they don't point to my copy anymore. If you are lucky enough to have a site-wide template, that might be a good place for the loading code. Try viewing the source of this page for an idea of how this can be done without slowing down pages that aren't photo albums.
4. Copy and customise the default CSS rules to your own site's local styelsheet.
5. Profit!

Ok, how do I add it to my browser?

If you want to just try PicPopper out or use it on someone else's bare-bones photo albums, drag the following bookmarklet to your browser's bookmarks toolbar:

PicPopper

Clicking on the bookmark will then enable PicPopper for whatever page you are looking at at the time.

Notes:

1. IE7 users will have to right-click on the link and select 'Add to favorites'. There may be a scary warning, which you can choose to ignore if you trust me.
2. If it doesn't work the first time you click the button, try clicking again. The bookmarklet loads two external Javascript files (jQuery and PicPopper), if they don't arrive in the correct order the script may not work.

How does it work?

When invoked with picPopper.prepare(), PicPopper will scan the page's DOM for any links to images (<a href=foo.jpg> etc.) and modify them to invoke the PicPopper user interface. If you for some reason want PicPopper to ignore some images, you can specify a regular expression which images must match, like so: picPopper.prepare(/regexp/).

Within the UI, the browser is asked to scale images to the largest (unstretched) size that will fit in the user's browser window. On most modern browsers this scaling is both fast and pretty. Older ones may make a mess of it though, if they work at all...

Back and Next links are available for moving back and forth, as well as a link for viewing the unscaled, full-sized image.

The up, down, left, right, esc and Q keys all do unsurprising things.

PicPopper attempts to be clever by preloading the next image, while one is being displayed, to make the album more responsive in low bandwidth situations. To avoid hogging too much RAM/bandwidth PicPopper only preloads one image at a time.

The UI built into the PicPopper javascript is deliberately bare-bones, so users can customize the look/feel of it with their own CSS rules. See the default stylesheet to get an idea of what can be tweaked (most everything).

Requirements

PicPopper requires jQuery and a modern browser, but in the samples here I've used Google's AJAX Libraries API to take care of loading all the required javascript (including jQuery) when the page is ready, so I don't have to host jQuery myself. Whether you do the same is entirely up to you.