Skip to a section of this page:

Butterfly lightbox

Why create yet another lightbox clone? Because the butterfly lightbox widget provides a robust, flexible and fully accessible lightbox soution. This solution accounts for window and text resizing, keyboard accessibility and controls focus appropriately for users of assistive technologies (see lightbox accessibility for more detail).

Examples

Place the following code in the <head> of your XHTML document.

Note: For best performance, it is recommended that you combine all the JavaScript files below into a single minified file.

<script type="text/javascript" src="jquery-1.4.1.js"></script>
<script type="text/javascript" src="jquery.resize-events.js"></script>
<script type="text/javascript" src="jquery.pxToEm.js"></script><!-- optional script if you wish to specify dimensions in em units -->
<script type="text/javascript" src="jquery.butterfly.js"></script>
<link rel="stylesheet" type="text/css" href="butterfly.css" />

The plugin can act on any link in the <body> of your document, for example:

<p><a href="butterfly.jpg">A beautiful butterfly</a></p>

The plugin needs to be initialised after the link markup has been parsed (once the DOM is ready is soon enough).

$('a').butterfly();

There are various options that can be passed on initialisation.

This will result in a link that opens the butterfly image in a lightbox layer above the main page content.

Working example

A complete demonstration of the butterfly plugin is available.

Download

butterfly is licensed under the The GNU General Public License (GPL), by downloading it you are agreeing to abide by the terms of that license.

Package

Download the complete butterfly 0.4 example package (.zip)

Individual files

Plugin options

The following options can be can be passed on initialisation of the plugin:

options = {
	contentDefaultWidth: null, // for content (can be em, % or px) - null default means 50em if pxToEm is available or 700px otherwise (a good line length for legibility)
	contentDefaultHeight: '100%', // for content (can be em, % or px)
	mediaMaxWidth: '100%', // for images (can be em, % or px)
	mediaMaxHeight: '100%', // for images (can be em, % or px)
	treatAsMedia: false, // set to true for content to be resized as if it's media (good for video content)
	lightBoxMargin: null, // margin around screen (can be em, % or px) - null default means 2em if pxToEm is available or 20px otherwise
	animateResize: true,
	animationSpeed: 250,
	collapseHeightWhenPossible: true, // when content is shorter than available height, collapse height of lightbox
	reuseFragment: false, // when using a fragment from the same page as the link, reuse the same DOM nodes (persisting their state) or clone a new copy?
	closeButton: false, // Should we have a close button?
	closeButtonImage: '', // set to the path of your close button image
	closeButtonCorner: 'tl', // top left 'tl' or top right 'tr' or bottom left (bl) or bottom right (br) - top left is the most intuitive option that doesn't overlap scrollabrs
	clickOverlayCloses: true, // Will clicking the overlay layer (the dark tinted area) close the lightbox?
	zoomFromClicked: false, // experiemental
	callbackPreOpen: null, // six callback functions can be defined that will be called at various points in the opening, closing and resizing of lightboxes
	callbackPreResize: null,
	callbackPostResize: null,
	callbackPostOpen: null,
	callbackPreClose: null,
	callbackPostClose: null
};
$('a').butterfly(options);