Boxer

A jQuery plugin for displaying images, videos or content in a modal overlay.

Current Version: 3.1.0


Installation

Include the following resources on your page before initializing:

<script src="jquery.fs.boxer.js"></script>
<link href="jquery.fs.boxer.css" rel="stylesheet">

Bower

You can deploy and update via the command line with Bower:

bower install Boxer

Options

Options are set by passing a valid options object at initialization or to the public "defaults" method. You can also set custom options for a specific instance by attaching a data-boxer-options attribute containing a properly formatted JSON object to the target element.

Name Type Default Description
callback function $.noop Funciton called after opening instance
customClass string '' Class applied to instance
extensions array "jpg", "sjpg", "jpeg", "png", "gif" Image type extensions
fixed boolean false Flag for fixed positioning
formatter function $.noop Caption format function
height int 100 Initial height (while loading)
labels.close string 'Close' Close button text
labels.count string 'of' Gallery count separator text
labels.next string 'Next' Gallery control text
labels.previous string 'Previous' Gallery control text
margin int 50 Margin used when sizing (single side)
minHeight int 100 Minimum height of modal
minWidth int 100 Minimum width of modal
mobile boolean false Flag to force 'mobile' rendering
opacity number 0.75 Overlay target opacity
retina boolean false Use 'retina' sizing (half's natural sizes)
requestKey string 'boxer' GET variable for ajax / iframe requests
top int 0 Target top position; over-rides centering
videoRadio number 0.5625 Video height / width ratio (9 / 16 = 0.5625)
videoWidth int 600 Video target width
width int 100 Initial height (while loading)

Events

Events are triggered on the target instance's element, unless otherwise stated.

Option Description
open.boxer Modal opened; triggered on window
close.boxer Modal closed; triggered on window

Methods

Methods are publicly available to all active instances, unless otherwise stated.

close

Closes active instance of plugin

$.boxer("close");

defaults

Sets default plugin options

$.boxer("defaults", opts);
Parameter Type Default Description
opts object {} Options object

destroy

Removes plugin bindings

$(".target").boxer("destroy");

resize

Triggers resize of instance

$.boxer("resize");
Parameter Type Default Description
height int | false Target height or false to auto size
width int | false Target width or false to auto size