Anabox

Current versions: 0.3, released 2010-02-05: switching from prototypal inheritance to parts constructor;
0.2.1, released 2010-02-05: Bugfixes for 0.2 (Configurables now mean something)

About Anabox

Anabox is yet another lightbox clone that only needs Javascript, but does not use any AJAX framework and is therefore extremely lightweight. It incorporates the following features:
  • Image captions
  • Grouping of images
  • Linking to the image, if no JavaScript enabled or incompatible web browser

How to use Anabox

Here is an image without a caption for you to test:


... and here one with a caption:


... and here a group of two pics:


All sample images: Wikimedia Commons

Sweet, isn't it? And you can use it yourself. All you need to do is download the package and follow these rules:
  • Include anabox.js and anabox.css in any page you want to use with anabox.
  • Put the images for prevlabel.gif, nextlabel.gif, closelabel.gif and loading.gif in the folder images on your webserver. You can customize the location and files via editing anabox.js line 3 (fileLoadingImage='images/loading.gif',fileBottomNavCloseImage='images/closelabel.gif';) and anabox.css lines 18 and 19.
  • Any picture you want to enable in the anabox layer, link to it via <a href="imagefile" rel="anabox">linktext</a>
  • If you want to use a caption add title="your caption" to the <a> element like this: <a href="imagefile" rel="anabox" title="your caption">linktext</a>
  • If you want to group images, add [group_name] to the rel attribut like this: <a href="imagefile" rel="anabox[group_name]" title="your caption">linktext</a> The group name can only consist of letters, numbers, underscore and hyphens and will not show up anywhere (except in the markup of course).
  • Other settings you might want to customize in anabox.js are also in line 3: borderSize=10 for the size of the border around the images and labelImage="Image",labelOf="of"; for image sets (outputs labelImage No. labelOf pictures_in_set).
  • For easier customization, download the uncompressed files and minify the javascript yourself, e.g. with The YUI compressor. You can then even check the option to reduce the file size even more by obfuscating the variables.
You can also download the uncompressed file for your own modifications of the code. The script has a lengthy introduction and lots of comments for each function, so you should be able to read it, provided you can read Javascript ;)

FAQ

  • What does the name mean?
    Anabox is lighter than the original Lightbox, and ana is the abbreviation of anorexic, therefore Anabox = anorexic box.
    If you find this offensive, then here is alternative etymology: Anabox stands for Another Box.

  • What license applies for Anabox?
    Anabox comes with an MIT style license, which allows you (more or less) to anything with the code.

  • What is a tar.gz file and how can I open it?
    tar.gz is a compressed (gzipped) archive file (tar) and most archiver software should be able to deal with it. Windows user e.g. should try the the free software 7zip.

  • There is a bug in Anabox. What should I do ?
    Send me an email how it is broken.

  • I have made a modification to Anabox, could you please integrate it into the code?
    Sure, send me an email or see the Github page.

  • I really like Anabox. What can I do to thank you?
    Send me an email how glad you are ;)

  • I really, really like Anabox. What can I do to thank you?
    Donate money to any of the following organisations that help keep the internet free: Chaos Computer Club, Electronic Frontier Foundation or Debian.

Download

Anabox 0.3 with minimized Javascript and Demo (parts constructor)
Anabox 0.2.1 with minimized Javascript and Demo (prototypal inheritance)
The uncompressed javascript file for 0.3
The uncompressed javascript file for 0.2.1

Anabox at GitHub
Clone URL