<a href="image.jpg" class="boxer" title="Caption">
<img src="thumbnail.jpg" alt="Thumbnail" />
</a>Demo
Gallery
<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
Fixed Positioning
$(".boxer").boxer({
fixed: true
});
Top Positioning
$(".boxer").boxer({
top: 50
});
In-Line Content
<a href="#hidden" class="boxer">Show Content</a>
<div id="hidden" style="display: none;">
<div class="content">
...
</div>
</div>
Show Hidden Content
jQuery Objects
$obj = $("Content!");
// OR
$obj = $("<div />").load("http://www.url.com/partial-markup/");
$.boxer($obj);
Show jQuery Object
iFrame
<a href="http://www.example.com/" class="boxer">Example</a>
View freejs.net
Custom Sizing
<a href="http://www.example.com/" class="boxer" data-height="500" data-width="500">Example</a>
View freejs.net
Custom Caption Formats
$(".boxer").boxer({
formatter: formatCaptions
});
function formatCaptions($target) {
return '<h3>' + $target.attr("title") + '</h3>';
}
Retina Support
$(".boxer").boxer({
retina: true
});
<a href="image-2x.jpg" class="boxer" title="Caption - Retina">
<img src="thumbnail-2x.jpg" alt="Thumbnail - Retina" />
</a>