Boxer Demo


View Documentation

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 'data-gallery' attribute to each item:

<a href="image_1.jpg" class="boxer" title="Caption One" data-gallery="gallery">
    <img src="thumbnail_1.jpg" alt="Thumbnail One" />
</a>
<a href="image_2.jpg" class="boxer" title="Caption Two" data-gallery="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" data-gallery="videos" title="">YouTube Video</a>
// OR
<a href="http://player.vimeo.com/video/VIDEO_ID" data-gallery="videos" title="">Vimeo Video</a>
Demo
YouTube Video Vimeo Video

Mobile

Boxer will automatically render a touch-friendly modal on mobile devices, but you can also force it to always render as mobile:

$(".boxer").boxer({
    mobile: true
});
Demo

Fixed Positioning

To display a more traditional lightbox that locks the window while open:

$(".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
Show Hidden Content

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
Show jQuery Object

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
View CNN.com

Sizing

When loading inline content or an iFramed URL you can specify the desired dimensions using html data attributes. If no dimensions are specified, or mobile styles are being rendered, the plugin will calculate them based on the current window and content size:

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

Caption Formating

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