Extbox
Customizable lightbox plugin for Ext Core.
Features
- Supports single photos, grouped photos, iframes, ajax and inline content.
- Lightweight - gzipped is only 4 KB (21 KB uncompressed).
- Oriented on upcoming HTML5, but supports IE6 and other old browsers.
- Appearance is controlled through CSS and don't require any changes to existing HTML.
Usage
Schema:
Ext.ux.extbox.register('target', group, {params});
Single photo:
Ext.ux.extbox.register('a[rel^=single]');
Grouped photos:
Ext.ux.extbox.register('a[rel^=gallery]', true);
Some site in iframe:
Ext.ux.extbox.register('a.target', false, {iframe: true});
Parameters
| Key | Default | Description |
|---|---|---|
| current | 'Image {current} of {total}' | Text pattern for grouped content. {current} and {total} replacing with actual numbers. |
| previous | '←' | Text for the previous button. |
| next | '→' | Text for the next button. |
| close | 'close' | Text for close button. |
| width | false | Total width of box (for now px only) |
| height | false | Total height of box (for now px only) |
| innerWidth | false | Width of loaded content without borders, margins, paddings (image width). |
| innerHeight | false | Height of loaded content without borders, margins, paddings (image height). |
| maxWidth | '90%' | Set maximum width of box. Can be % or px. |
| maxHeight | '90%' | Set maximum height of box. Can be % or px. |
| scale | true | if true scale big images and other content to maxWidth and maxHeight values. |
| animate | true | If true box showing, resizing, hiding will be animated. |
| resizeDuration | 0.3 | Set the duration of box resizing in seconds. |
| overlayOpacity | 0.8 | Level of overlay opacity. Range: from 0 to 1. |
| overlayDuration | 0.2 | Set the duration of showing/hiding the overlay in seconds. |
| hideInfo | false | Set the visibility level of information (title, current). Values: false, true, 'auto'. |
| easing | 'easeOut' | Custom easing type. For all easing types see Ext.Fx-easing. |
| iframe | false | Load content in iframe. |
| inline | false | Display content from the current page. |
| href | false | Override the anchor URL or to associate a URL for non-anchor elements (span, div, header etc.). |
| title | false | Set the custom title for element. |