Sanebox

A simple Lightbox for jQuery

Overview

Sanebox is a jQuery plugin for displaying images and videos in an on-page lightbox. Using Sanebox, you can add clickable thumbnails of images or videos on your site which will open the media without leaving the page. Some of Sanebox's features:

Contents

Demo

See it in action.

Requirements

jQuery
Sanebox is a plugin for jQuery, so obviously it is required to run Sanebox correctly! I developed the plugin using jQuery 1.4.2, but it might run under earlier versions. A lower bound on the earliest version you can use is 1.2.6 — I ran into some problems during development because I initially was using an earlier version than this.

Compatibility

The web is a sprawling, monstrous entity. Developing re-usable JavaScript code, especially code meant to interact with new features like HTML 5 video, is tricky. I tested Sanebox under several browsers at my disposal, even tore out my hair over a few Internet Explorer that took a while to resolve, but I obviously cannot guarantee that it will always work. Assuming that you have it set up correctly, it should work under the following browsers. Please let me know if you have used it on another browser or earlier version and it works.

Tested On

Download

Quick Start Guide

  1. Add jQuery to your page. You can either download it from their site or link to the Google hosted version by putting this code in your <head> tag: 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  2. Add a link to the Sanebox script to your head tag (after jQuery, since Sanebox uses jQuery). If you keep it in its own directory (a good idea since it uses helper files), then you can link to it like so. Note that I link to the minified version (which strips out all comments and does other processing to reduce the total file size of the plugin): 
    <script type="text/javascript" src="sanebox/jquery.sanebox.min.js"></script>
    You do not need to worry about including the css file or other helper scripts; Sanebox knows how to include the files it needs.
  3. Add this markup to your webpage: 
    <p class="gallery">
	<a class="lightbox" href="images/safeco.jpg" title="One Example">
		<img src="images/safeco_th.jpg" alt="This is a caption. They're not necessary." />
	</a>
	<a class="lightbox" href="images/rocks.jpg" title="Another Examples. Titles also aren't necessary.">
		<img src="images/rocks_th.jpg" alt="A different item, a different caption." />
	</a>
	<a class="lightbox" href="spaceroids.flv" title="One Example">
		<img src="spaceroids_flv_th.jpg" alt="This is a Flash video, but Sanebox can also display HTML 5 (H.264/Theora/VP8) video." />						
	</a>
</p>
    Make sure that the referenced images actually exist! You can copy the ones from this site if you don't have any images immediately avialable for experimenting.
  4. Now add this bit of code to your <head> tag, right after the script tag that includes Sanebox: 
    <script type="text/javascript">
	$(document).ready(function () {
		$(".lightbox").sanebox({
			group : 'default'
		});
	});
</script>
  5. Voilà! Clicking any thumbnail brings it up in a lightbox:

    This is a caption. They're not necessary. You can click this item to enlarge it. This is a Flash video, but Sanebox can also display HTML 5 (H.264/Theora/VP8) video.

  6. Continue reading the documentation for more details.

Licensing

Sanebox itself is available under a Creative Commons license. You are free to modify and share it, even for commercial purposes, as long as you attribute the author (me) and you make the code available for others to modify.

Some of the components used by Sanebox are available under different licenses. Specifically,

Author

Dave Short — dave at daveshort dot org