BeatBox
Version 1.23 — 30th September 2007
BeatBox is my take on the lightbox/thickbox concept, with some particular variations:
- It only works for images, not HTML or other content (yes, that's a feature!)
- It generates clean semantic content, and is natively accessible (ie. no special keystrokes to learn)
-
It has a
fullscreen
link for viewing the original image directly - Its dimensions are configurable as a proportion of the window size
- It stands alone — no library dependencies
BeatBox is lightweight and simple, designed to work for single images only — it doesn't create slideshows. You can see it in action in a recent article at SitePoint.
Demo
Get the script
Download the zipfile [188K], unzip its contents into your site
directory and include the script on your page —
it should go at the very end of the <body> section:
<!-- BeatBox by Brothercake - http://www.brothercake.com/ -->
<script type="text/javascript" src="beatbox.js"></script>
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 "beatbox.css" stylesheet,
or add its rules to your own stylesheet (remember to change the
background-image url() paths to match the location of the images,
if they're not in the same directory).
Then at the top of the script is the instantiation command, which takes two arguments:
- Max image size
-
Specify a floating-point number between
0and1. 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"riverbank.jpg".
Finally, to implement the behavior simply add the class name
"beatbox" to any link which points to an image file.
![[php]](/images/php.gif "Uses PHP")
