Submit your widget

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

Created 5 years ago   Views 23331   downloads 6604    Author benplum
Boxer - A jQuery plugin for displaying images, videos or content in a modal overlay
View DemoDownload
81
Share |

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

Boxer is a simple way to display images, inline-content or iFramed URLs in a lightbox-style modal.

Usage

Installation

Include the following resources on your page before initializing:

<link href="jquery.fs.boxer.css" rel="stylesheet" type="text/css" media="all" />
<script src="jquery.fs.boxer.min.js"></script>

Bower

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

bower install Boxer

Implimentation

Boxer works like most of the other light box scripts out there. Target any links you'd like to open in a modal when initializing:

<a href="large-image.jpg" class="boxer">
	<img src="thumbnail-image.jpg" />
</a>
$(".boxer").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
duration int 250 Animation duration
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   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.

defaults

Sets default plugin options

$.boxer("defaults", opts);
PARAMETER TYPE DEFAULT DESCRIPTION
opts object {} Options object

destroy

Removes instance of plugin

$.boxer("destroy");

resize

Triggers resize of instance

$.boxer("resize");