- 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 |
JS Tutorial
