- Overview
- Documents
A jQuery plugin for overlaying images or content.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:
<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 |