BeatBox
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
fullscreen
link 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.
Demo
beatbox link to indoor-beach.jpg
Latest update
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 <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 bottom of the script is the instantiation command, which takes two arguments:
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 class
name
"beatbox"
to any link which points to an image file. If JavaScript
(or this script) is not supported, the browser will simply follow that link.