Displays a lightbox with the ability to print its contents with a choice to apply a custom print css as well as highlight specific content within the lightbox as well as apply tooltips of that content to the trigger. jquery easing can also be used to animate zooming in and out from the trigger.
The trigger for the ifxLightBox should be (but not restricted to) a link (<a>) which consists of the class="ifxLightBox" (to initiate the ifxLightBox UI engine), a unique ID (for coremetrics tracking), an href attribute (ie: href="#LightBoxContent") which holds the ID of the content DOM (ie: <div id="LightBoxContent"with a prefixed "#", and an optional rel attribute (ie: rel="#HightlightContent") to activate highlighting of a specific DOM within the lightbox content when openned and also auto populate amd activate ifxTooltip on the trigger with the selected DOM's content.
Proper standard for triggering a lightbox with a reference trigger. *Must use with all legal lightboxes
| Key | Default value | Description |
|---|---|---|
| hidePrint | false | Allow printing of lightbox contents and show print icon in lightbox using ifxPrint |
| padding | 10 | Space between ifxLightBox wrapper and content |
| margin | 20 | Space between viewport and ifxLightBox wrapper |
| opacity | false | When true, transparency of content is changed for elastic transitions |
| modal | false | When true, 'overlayShow' is set to 'true' and 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' are set to 'false' |
| cyclic | false | When true, galleries will be cyclic, allowing you to keep pressing next/back. |
| scrolling | 'auto' | Set the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes', or 'no' |
| width | 560 | Width for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false' |
| height | 340 | Height for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false' |
| autoScale | true | If true, ifxLightBox is scaled to fit in viewport |
| autoDimensions | true | For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results |
| centerOnScroll | false | When true, ifxLightBox is centered while scrolling page |
| ajax | { } | Ajax options Note: 'error' and 'success' will be overwritten by ifxLightBox |
| swf | {wmode: 'transparent'} | Params to put on the swf object |
| hideOnOverlayClick | true | Toggle if clicking the overlay should close ifxLightBox |
| hideOnContentClick | false | Toggle if clicking the content should close ifxLightBox |
| overlayShow | true | Toggle overlay |
| overlayOpacity | 0.3 | Opacity of the overlay (from 0 to 1; default - 0.3) |
| overlayColor | '#666' | Color of the overlay |
| titleShow | true | Toggle title |
| titlePosition | 'outside' | The position of title. Can be set to 'outside', 'inside' or 'over' |
| titleFormat | null | Callback to customize title area. You can set any html - custom image counter or even custom navigation |
| transitionIn, transitionOut | 'fade' | The transition type. Can be set to 'elastic', 'fade' or 'none' |
| speedIn, speedOut | 300 | Speed of the fade and elastic transitions, in milliseconds |
| changeSpeed | 300 | Speed of resizing when changing gallery items, in milliseconds |
| changeFade | 'fast' | Speed of the content fading while changing gallery items |
| easingIn, easingOut | 'swing' | Easing used for elastic animations |
| showCloseButton | true | Toggle close button |
| showNavArrows | true | Toggle navigation arrows |
| enableEscapeButton | true | Toggle if pressing Esc button closes ifxLightBox |
| onStart | null | Will be called right before attempting to load the content |
| onCancel | null | Will be called after loading is canceled |
| onComplete | null | Will be called once the content is displayed |
| onCleanup | null | Will be called just before closing |
| onClosed | null | Will be called once ifxLightBox is closed |
| Key | Description |
|---|---|
| type | Forces content type. Can be set to 'image', 'ajax', 'iframe', 'swf' or 'inline' |
| href | Forces content source |
| title | Forces title |
| content | Forces content (can be any html data) |
| orig | Sets object whos position and dimensions will be used by 'elastic' transition |
| index | Custom start index of manually created gallery (since 1.3.1) |
| Method | Description |
|---|---|
| $.ifxLightBox.showActivity | Shows loading animation |
| $.ifxLightBox.hideActivity | Hides loading animation |
| $.ifxLightBox.next | Displays the next gallery item |
| $.ifxLightBox.prev | Displays the previous gallery item |
| $.ifxLightBox.pos | Displays item by index from gallery |
| $.ifxLightBox.cancel | Cancels loading content |
| $.ifxLightBox.close | Hides ifxLightBox Within an iframe use - parent.$.ifxLightBox.close(); |
| $.ifxLightBox.resize | Auto-resizes ifxLightBox height to match height of content |
| $.ifxLightBox.center | Centers ifxLightBox in viewport |
08/01/2011 - andrew.donald@rci.rogers.com