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.

Abstract illustration for this script: a stylized art-deco cartoon photo in a frame.

Demo

beatbox link to indoor-beach.jpg

A small bathroom filled with sand; there's a plastic bucket and spade in the sand, a treasure chest, and several large inflatable palm trees

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:

Max image size

Specify a floating-point number between 0 and 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 src of 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".

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.

Get the script

BSD License → Terms of use

Categories...

Website gadgets

Bits of site functionality:

Usability widgets

Images

Image manipulation scripts:

Local network apps

Web-applications for your home or office network:

Game and novelties

Our internal search engine is currently offline, undergoing some configuration changes in preparation for a major site overhaul. In the meantime, you can still search this site using Google Custom Search.


In this area

Main areas


[brothercake] a round peg in a square hole, that still fits