Version 1.3 — 10th November 2008
BeatBox is my take on the lightbox/thickbox concept, with some particular variations:
- It only works for images, not HTML or other content
- It generates clean semantic content, and is natively accessible (ie. no special keystrokes to learn)
- Beatbox links degrade cleanly back to regular links
It has a
fullscreenlink for viewing the original image
- The size is configurable as a proportion of the window
- It stands alone — no library dependencies
BeatBox is a lightweight and simple way to preview single images.
Version 1.3 is a minor update, that re-factors a Firefox hack into a legacy hack for Firefox 2.
Get the script
Download the zipfile [308K], unzip its contents into your site
directory and include the script on your page —
it should go at the very end of the
It initializes immediately, hence no load events are required; but this is why it has to come at the end, so that all DOM elements it affects are already present.
You will also need to include the
or add its rules to your own stylesheet (remember to change the
url() paths to match the location of the images,
if they're not in the same directory).
Then at the bottom of the script is the instantiation command, which takes two arguments:
- Max image size
Specify a floating-point number between
1. The image preview will be sized in proportion, so that its longest size is this proportion of the available browser width or height (as applicable).
- Thumbnail extension
This is for when you want an image thumbnail to link to a larger version of that image. The
srcof the thumbnail will be parsed to remove whatever extension you specify here, to derive the path of the larger image.
So for example, if you leave this at its default value of
".thumb", then a thumbnail called
"riverbank.thumb.jpg"will load an image called
Having the instantiation command in the main script makes it self-contained; but if you want to use the script in different places within a site or application, and have different parameters for some instances, then you'll want to move this command elsewhere. If you do this, the main script can then go anywhere on the page, and only the instantiation command has to come at the end of the body section.
And finally ... to make the beatbox work simply add the
(or this script) is not supported, the browser will simply follow that link.