jQuery Boxer Plugin Demo

Basic

To display a single image simply link to the source. Also, 'title' attributes will automatically populate the caption field:

$(".boxer").boxer();

<a href="image.jpg" class="boxer" title="Caption">
	<img src="thumbnail.jpg" alt="Thumbnail" />
</a>

Demo

Gallery

To display a gallery of images attach a common 'rel' attribute to each item:

<a href="image_1.jpg" class="boxer" title="Caption One" rel="gallery">
    <img src="thumbnail_1.jpg" alt="Thumbnail One" />
</a>
<a href="image_2.jpg" class="boxer" title="Caption Two" rel="gallery">
    <img src="thumbnail_2.jpg" alt="Thumbnail Two" />
</a>

Demo

YouTube & Vimeo Videos

Boxer will auto-detect a YouTube or Vimeo embed URL and render accordingly. Videos can also be included in galleries alongside image.

<a href="http://www.youtube.com/embed/VIDEO_ID" rel="videos" title="">YouTube Video</a>
// OR
<a href="http://player.vimeo.com/video/VIDEO_ID" rel="videos" title="">Vimeo Video</a>

Demo

Fixed Positioning

To display a more traditional lightbox that sticks to the window:

$(".boxer").boxer({
    fixed: true
});

Demo

Top Positioning

To force the modal to always animate from a standard top position:

$(".boxer").boxer({
    top: 50
});

Demo

In-Line Content

To display a section of inline markup link to the parent element's 'id'. It's important to note that a copy of the matching element's inner markup will be used, so try to avoid using decent elements with id selectors:

<a href="#hidden" class="boxer">Show Content</a>
<div id="hidden" style="display: none;">
    <div class="content">
        ...
    </div>
</div>

Demo

jQuery Objects

You can also display compiled jQuery objects, this is especially usefull when loading partial content or using a templating system. To display a pre-compiled jQuery object, simply pass the new object when calling the plugin.

$obj = $("
Content!
");
// OR
$obj = $("<div />").load("http://www.url.com/partial-markup/");

$.boxer($obj);

Demo

iFrame

To display a valid URL in an iFrame simply link to the page:

<a href="http://www.example.com/" class="boxer">Example</a>

Demo

Custom Sizing

When loading inline content, a jQuery object or an iFramed URL you can specify the desired dimentions using html data attributes. If no dimentions are specified, the plugin will calculate them based on window and content size:

<a href="http://www.example.com/" class="boxer" data-height="500" data-width="500">Example</a>

Demo

Custom Caption Formats

To customize the caption markup:

$(".boxer").boxer({
    formatter: formatCaptions
});

function formatCaptions($target) {
	return '<h3>' + $target.attr("title") + '</h3>';
}

Demo

Retina Support

To display images at "retina" quality the original image dimentions of halved, sizing the images to at least 2x pixel-density and ensuring crisp images on your fancy new display.

$(".boxer").boxer({
    retina: true
});

<a href="image-2x.jpg" class="boxer" title="Caption - Retina">
    <img src="thumbnail-2x.jpg" alt="Thumbnail - Retina" />
</a>

Demo