LightBox - Parameter Options

Introduction

The paramter options define the functionality and layout of the lightbox effect. Paramters are defined as properties of an object or as an object literal. If you need a minimal lightbox with the default functionality and layout, use an empty params object '{}'.

Each template includes a separate .js file which has all the paramter settings. The paramters within the file are returned by a function call. In the example below 'nflbParams_default()' returns the paramters object for the template. To modify the template paramters simply edit the .js file, the settings are sectioned and commented within the file.

If you only require a few paramters for your lightbox, pass the settings as an object literal instead of referencing the templates separate .js file settings.

Environment Specific Settings

Some paramter options can be specifically defined by environment (browser type, OS, mobile, etc...). Paramter options customizable by environment are noted with 'environment object' in the data type.

The environment specific settings are defined using an object literal where the property name is the environment and the value is the setting. Valid environment names must match the NF.util.browser class properties. These values include...

• all - Applies the value to all environments.
• android - Google Android OS is used on a host of smart phones and tablets.
• chrome - Chrome Browser
• firefox - Firefox Browser
• ie - Internet Explorer Browser
• ie7 - Internet Explorer Version 7.x
• ie7Down - Internet Explorer Version 7.x & Down
• ie8 - Internet Explorer Version 8.x
• ie8Down - Internet Explorer Version 8.x & Down
• ie9 - Internet Explorer Version 9.x
• ie9Up - Internet Explorer Version 9.x & Up
• ios - Detects iOS: iOS is used on iPad, iPhone, iPod Touch, etc...
• iPad - Apple iPad
• mobile - Detects Mobile Devices: Includes tablets such as iPad and androids and hand held smart phones.
• opera - Opera Browser
• safari - Safari Browser
• smallMobile - Detects Small Mobile Devices: These are devices with a screen pixel ratio greater than 1, typically smart phones.
• webkit - Detects Webkit: Inlcudes Safari & Chrome based browsers.

The following is an example of how to apply environment specific settings for the 'showTooltips' parameter. The setting below will cause tooltips to display in all environments except Internet Explorer and mobile devices.

When the users environment matches more than one property (except 'all') the first matching property value will be applied.

Basic Parameter Options

• preloadFrameImages   [boolean] - true,false
  Preload the frame images. If true the preload occurs onload after the rest of the document content has been loaded. However, if using an inline slide show style effect, the initial frame and other frames when using thumbnail frame links can possibly load before the rest of the page.
• mobileDoubleTapBehaviour   [string] - 'maximizeBox', 'maximizeContent', 'expand', (or any valid button command)
  The double tap behaviour is triggered in mobile devices when the user double taps a frames content.
• hasDefaultFocus   [boolean] - true, false
  Applies to inline slide show lightboxes and gives the slide show focus onload. When focused keyboard events can be used to navigate the box.
• iframeShowScrollBars   [boolean] - true, false
  Hides or shows the vertical and horizontal scroll bars with iFrame based frame content (remote or local html link).
• loopFrames   [boolean] - true, false
  When navigating frames loop back to the beginning or end.
• stretchFit   [boolean] - true, false
  When true the frame content will stretch to fit the inner box area vs. keeping the aspect ratio preserved.
• showTooltips   [boolean | environment object] - true, false, {environment specific settings}
  Show tool tips on buttons and frame links. Specifically define by environment if necessary (see above).

Blockout Background

• blockoutOpacity   [object] - {opacity:float, rgb:string}
  Defines the blockout backgrounds opacity and color. This is parameter defined vs. CSS driven for full cross browser functionality and performance. The lightbox will auomtaically apply RGBA, RGB + Opacity, or filter:Alpha CSS styles based on the detected browsers capabilites.
  
  Define the value using an object literal, example...
  
  

Default LightBox State

• startContentMaximized   [boolean | environment object] - true, false, {environment specific settings}
  If true, when the inline or modal lightbox loads the frame content will be maximized. With modal lightboxes the content will expand to the maximum size minus the minBlockoutPadding.
• startBoxMaximized   [boolean | environment object] - true, false, {environment specific settings}
  If true, when the inline or modal lightbox loads the box will be maximized to fit the parent container.

Minimum Dimensions

• minBlockoutPadding   [object | environment object] - {topBottom:int, leftRight:int} {environment specific settings}
  The minimum blockout padding determines the space between the lightbox and the parent container. An object literal containing seperate topBottom and leftRight values can be set e.g. {topBottom:10, leftRight:20}
• minContentSpaceDimensions   [object] - {img:{}, iframe:{}, inlineHTML:{}, object:{}}
  The minimum content space dimensions define the smallest possible size for different content types. Set the paramter to an object containing type properties, each with a width and height object as the value. If you want a miminum image size of 10x10 and a mimimum iframe size of 50x50 you would set the value to... {img:{w:10, h:10}, iframe:{w:50, h:50}}
  
  Valid content types include img, iframe, inlineHTML, object. The 'object' type applies to video and flash.
• matchMinWidthToControlBars   [boolean] - true, false
  When true the box width will not size smaller than the widest control bar unless the browser window itself is sized smaller.

Zoom Settings

• zoomStepSize   [float] - number > 1
  Set to a number (e.g. 1.5) that represent the factor to zoom by when using the zoom buttons or keyboard commands.
• zoomMin   [float] - number>0
  Value that represents the minimum zoom factor (e.g. .5 = 1/2 or 50%).
• zoomMax   [float] - number>0
  Value that represents the maximum zoom factor (e.g. 5 = 500%).

Basic Animation Options

• animationFramesFactor   [float | environment object] - number > 0, {environment specific settings}
  The animation frames factor alters the number of frames for all animation sequences. A value of .5 would decrease the number of frames by 1/2 which would increase the spead. This setting is primarily meant for fine tuning the animation effects for different browsers and environments...
  
  

  
  A setting of 1 keeps the animation frames as defined in the animation sequences, in the example above mobile devices will use 1/3 the frames, safari 1/2, etc...
• animationGPUBoost   [boolean | environment object] - true, false, {environment specific settings}
  Uses the graphics card GPU to boost the animation speeds in some browsers. By default animations are GPU accelerated in IE and FireFox, the setting primarily applies to Chrome and Safari.
• syncCurNextFrameAnims   [boolean] - true, false
  Synchronize the current frame animation transition with the next frame. Typically this applies to inline box slide shows. However the setting can also apply to modal boxes in a maximized state.
  
  This feature allows the frame to animate the hide state while the next frame animates its show state. Use this option to create push effects (new frames push the current frame off screen), morphs (opacity hide / show), and more.
• contentAnimsApplyTo   [string] - 'parent', 'innerBox'
  Apply frame content animations to the content parent space, or the lightbox custom styled inner box. Each frames content sits within a parent space container which also nests within another container called the inner box. The inner box can accept custom CSS styling (in most templates this is a simple border, rouded edges, or a tiled background).
  
  Specify 'innerBox' if you want the content plus the lightbox inner container animated. Otherwise, choose 'parent' and only the content itself and all surrounding margins and padding space will be animated.
• skipLoadingImageIfPreloaded   [boolean] - true, false
  When true, the loading image (typically an animated PNG or GIF) will not be shown if the frame image was preloaded.
  
  NOTE: Only image type content can be preloaded. Unlike image content, this setting will only apply to video / Flash (all object content), iframe, and inlineHTML frames when navigated to a second time.

Delay Timers

• extraLoadDelay   [int | environment object] - number (milliseconds), {environment specific settings}
  The amount of extra time in milliseconds (1/1000 second) to wait before loading the frame. The delay occurs between the hide and show of the loading icon.
• beforeShowControlBarsDelay   [int] - number (milliseconds)
  The amount of extra time in milliseconds (1/1000 second) to wait before showing the top and bottom control bars. This delay occurs after the frame content is displayed and before the control bars are animated or made visible.
• spoolCommandExecution   [int] - number (milliseconds)
  The amount of time in milliseconds (1/1000 second) to allow spooling of the last user command before a frame transition is completed.
  
  This setting allows the user to execute a command while a frame change transition is occuring. If the command occurs within the specified time before the transitions end, the command will be executed once the frame transitions are completed.

Slide Show Play Timers

• startPlaying   [boolean] - true, false
  Start the gallery plaing by default when the lightbox is shown or loaded.
• slideShowTimer   [int] - number (seconds)
  The number of seconds between slide show gallery frames.
• slideShowStartDelay   [int] - number (seconds)
  The number of seconds to wait before the slide show moves to the next frame after pressing the play button.

Video Settings

• flashVideoPlayer   [string] - URL
  Absolute or relative URL pointing to your flash video player, Example...
  
  

  
  Your flash video player will be used with video content hosted on your domain. The lightbox will choose the best player possible (HTML5, QuickTime, or Flash) and not always use your flash player unless otherwise specified with the defaultVideoPlayer paramter (see below).
  
  Remote videos like YouTube and Vimeo do not rely on this setting and are configured with the latest embed offerings available. These video types are auto detected and configured for display without any special paramter settings required.
• defaultVideoPlayer   [string | environment object] - default player name, {environment specific settings}
  Set a default video player name, options include... 'quicktime', 'flashplayer', 'flashanimation', 'html5'
  
  By default the lightbox will test for and choose the best possible player for your local video, however in some situations you may want to override the default player choice. The example below shows how to force iPad and iPhone to use 'QuickTime' vs. the default 'html5'
  
  

Top & Bottom Control Bars

• topbarControls   [object] - object specifying all controls
  This paramter is an object which defines all the controls and order of appearance for the top bar. Set the properties to any combination of valid control types (see 'Custom Controls' below)...
  
  

  
  The example above adds text based navigation buttons to the left of the bar with a close button pushed flush right.
• bottombarControls   [object] - object specifying all controls
  This paramter is an object which defines all the controls and order of appearance for the bottom bar. Set the properties to any combination of valid control types (see 'Custom Controls' below)...
  
  

  
  The example above adds text populated by the frame title to the left of the bar with a play button pushed flush right.
• topbarDoubleClickBehaviour   [string] - 'maximizeBox', 'maximizeContent', 'expand', (or any valid button command)
  The double click behaviour is triggered when the user double clicks an empty area in the top bar.
• botbarDoubleClickBehaviour   [string] - 'maximizeBox', 'maximizeContent', 'expand', (or any valid button command)
  The double click behaviour is triggered when the user double clicks an empty area in the bottom bar.
• barControlsVerticalAlign   [string] - 'top', 'middle', 'bottom'
  Determines how the controls are vertically aligned within the bars.
• showControlsDuringTransitions   [boolean | environment object] - true, false, {normal:boolean, boxMaximized:boolean}
  If true, the control bar buttons will remain visible during the animation transitions between frames (note: button clicks are ignored during the transitions). This paramter option can be set to true or false, or further defined by box type. To specify different settings by box type use an object literal as shown below...
  
  
• disableControls   [environment object] - {ie:array, mobile:array, etc...}
  Disable control by environment. Specify an array of your control names to disable for specific environments...
  
  

  
  The example above disables zoom controls in all mobile devices and Internet Explorer 8.x down.

Custom Controls - Buttons

Custom control buttons are added as properties of your control bar and overlay paramter objects...

• myParams.topbarControls
• myParams.bottombarControls
• myParams.overlay.top
• myParams.overlay.middle
• myParams.overlay.bottom

Each control can be defined more than once by customizing the property name (e.g. 'close1', 'close2', 'closeX', 'closeY', etc...). In the example below a close button is added to both the bottom and top control bars...

The button value can be a string, boolean (must resolve to true or its not added), or object with additional settings depending on the button type features. A custom property hook (see the 'Button Controls - Text' section below for more details) can be used within any button text.

Each button is CSS accessible by the property name you give it (e.g. 'close1', 'close2', etc...). The example CSS code below illustrates how to custom style a close button named 'close1'...

Buttons are displayed horizontally on the bars in the order they are defined. Combine buttons, text, spacers, and frame link controls in any order with any CSS styling to create any desired layout and look.

• close   [boolean | string] - true | button text
  Closes the lightbox. The button is not added if the lightbox is an inline slide show.
• expand   [boolean | string] - true | button text
  Expands an inline lightbox to a modal window. The button is not added if the lightbox is already modal.
• navNext   [boolean | string] - true | button text
  Navigate to the next frame, or the first frame if looping is enabled.
• navPrevious   [boolean | string] - true | button text
  Navigate to the previous frame, or the last frame if looping is enabled.
• navFirst   [boolean | string] - true | button text
  Navigate to the first frame.
• navLast   [boolean | string] - true | button text
  Navigate to the last frame.
• maximizeContent   [boolean | string | object] - true | button text | {see description}
  Maximizes the frame content. Set to true, a string, or use an object to define CSS switch states. The CSS switch states allow for a custom button or styles to be switched when the content is maximized vs. normal.
  • value - Optionally specify the text value for the button.
  • switchType - The condition to detect for the switch (typically 'contentMaximized')
  • classNameSwitch - The class name to apply in the switched state.
  The following is an example of how to define a custom maximize button with a switched state.
  
  
  
  Below is how the CSS for the maximize and restore state buttons are defined...
  
  
  
  
• maximizeBox   [boolean | string | object] - true | button text | {see description}
  Maximizes the lightbox. Set to true, a string, or use an object to define CSS switch states. The CSS switch states allow for a custom button or styles to be switched when the content is maximized vs. normal.
  • value - Optionally specify the text value for the button.
  • switchType - The condition to detect for the switch (typically 'boxMaximized')
  • classNameSwitch - The class name to apply in the switched state.
  The following is an example of how to define a custom maximize button with a switched state.
  
  
  
  Below is how the CSS for the maximize and restore state buttons would be defined...
  
  
  
  
• zoomPlus   [boolean | string] - true | button text
  Zooms the content in. This button is active on frames with image and inlineHTML content only.
• zoomMinus   [boolean | string] - true | button text
  Zooms the content out. This button is active on frames with image and inlineHTML content only.
• navPlay   [boolean | string] - true | button text
  Plays the gallery slide show. This button is only active when more than one frame is defined.
• navPause   [boolean | string] - true | button text
  Pause / Stops the gallery slide show. This button is only active when more than one frame is defined.

Custom Controls - Text / HTML

Custom control text may be added as properties of your control bar objects... (See the 'Custom Controls - Buttons' section above for additional details.)

• myParams.topbarControls
• myParams.bottombarControls

Text controls can include plain text or any HTML including links. To add lightbox specific details such as the current frame title or zoom level, insert property hooks within your text values.

The property hook syntax is similar to an opening HTMl tag. The example below hooks into the current frame title and inserts it within the text control...

You can combine any number of hooks and formatting within a single text control. The example below adds a caption and the frames title in bold, plus shows the src (url) property for the frame.

If the frames title was "Crazy Cats" and the src was "images/crazy_cat01.jpg", the resulting control text would look similar to...

Funny Photos: Crazy Cats (images/crazy_cats01.jpg)

Any frame property can be used, including custom property names added through the 'rel' tag or with script. You can easily pull in some very unique data with the hooks. For example the 'rel' tags for your lightbox links can be dynamically generated by your server or applied by hand and include product descriptions, pricing, sizes, etc. These details can be formatted and pulled into your lightbox text controls with the property hooks!

• text   [string] - text / html
  Add any number of text controls ('text1', 'text2', 'text_any_name', etc...). Use plain text, html and optional property hooks (see above) in the value.
• textTitle   [string] - text / html
  Custom title text example based on the current frames title property...
  
  
• textZoom   [string] - text / html
  Custom zoom text indicator based on current zoom level property...
  
  
• textFramePos   [string] - text / html
  Custom frame location indicator
  
  
• playAnim   [object.countDown:object] - {countDown{start:int, content:string}}
  Adds a custom animation indicator and optional countdown timer for the play option. If using the count down option, specify a ('countDown') property with an object as the value and the following properties...

  • start - The number of seconds at which to start showing the text based countdown timer.
  • content - The content to display, the property hook '<count>' shows the seconds left on the count down.

  The playAnim control example below creates a count down timer that becomes visible when the timer hits 3 seconds...
  
  

  
  Two special classes are applied to the playAnim control. The 'nflb-playing' class is applied to the control itself when playing. If you defined a countDown timer, a div is added to the control with the class name 'nflb-countdown'. The CSS below shows how to style the control. The example CSS shows an animated gif when playing and positions and styles the count down text to the upper right corner of the play indicator image.
  
  
• hSpacer   [string] - width
  Adds space between controls, the value can be a % or px based unit. When 100% is applied the result is similar to a table cell specified as 100%, the spacer will add enough space between the controls so that all controls plus the spacer add up to 100% of the bars width.
  
  The example below adds a title to the left of the bottom bar and a close button to the right.
  
  

Custom Controls - Frame Links

Frame links are an automatically generated series of numeric, text based, or thumbnail images which link to specific frames in your lightbox slide show gallery. The custom frame links are added as properties of your control bar objects... (See the 'Custom Controls - Buttons' section above for additional details.)

• myParams.topbarControls
• myParams.bottombarControls

The frame links automatically center themselves based on your current frame position. This occurs for single line and multi-column frame links which flow right to left or top to bottom.

Below is a screen capture of numbered single column frame links. Style these in any way including active and hover states.

This next example shows text based descriptions. Like all text controls, parameter hooks can grab frame specific data. The example below uses the actual frame ID as the desciption for each frame link. This is accomplished with a paramter hook...

Thumbnails are automatically generated from the frame images. A host of options scale, crop, and align the thumbs for just the right look. Custom CSS adds extra emphasis with both hover and active (current frame) styling...

Rows and columns for all frame link types are fully customizable. Flow the links from left to right or top to bottom. Specify the width and height of the thumbnails, plus much more. Like all controls, multiple frame links with varied styles can be added to a single lightbox container. Below is an example of thumbnail image links with the rows set to 2 and columns set to 6...

Multiple frame link controls can be added to the top and bottom bars in the same way as button and text controls. The frame link value is an object with various properties that define the layout and type of links to display. The example framelink setting below is a basic numeric series of links with 10 columns visible at a given time...

Below is an example specifying a single row of 6 visible thumbnail image columns...


The following property options can be specified within a frame links control object...

• rows [int] - The number of rows to display. (optionally use an environment specific object)
• visibleColumns [int] - The number of visible horizontal items / columns. (optionally use an environment specific object)
• flowLTR [boolean] - Flow links left to right or top to bottom (top to bottom is the default with multiple rows).
• linkContent [string | object] - The links content to display. Set to null for numbered links, use a string w/ optional property hooks for text / HTML based links, and use an object for thumbnail images (see below for property options)...
  • thumbNails [boolean] - Set to true if using thumbnail images (typical).
  • width [int] - The width of the thumbnail.
  • height [int] - The height of the thumbnail.
  • style [string] - The display style... clip-top, clip-center, clip-bottom, clip-left, clip-right. Or any combo (e.g. clip-top-left, clip-center-right, etc...). Leave out or set null to scale fit the image to the thumbnail space.

A more complex example below arranges thumbnail frame links in two rows with the flow set left to right and clipping top center.

A host of CSS classes are available for styling the link container and items as well as hover and active states. Like all controls, the CSS class names are based on the property id of your frame links object. The following shows how the CSS is defined for a frame link object with an id of 'framelinks1'. The CSS styles are taken from the default template within the download which is also shown above in the numbered screen shot...

• frameLinks   [object] - frame link object (see above for full details)
  For details on creating frame link objects see the details above and the template parameter files in the download.
• frameLinksNumeric   [object] - frame link object (see above for full details)
  Example custom frame link object with numeric links...
  
  
• frameLinksText   [object] - frame link object (see above for full details)
  Example custom frame link object with text / HTML based (property hooks optional) links...
  
  
• frameLinksThumbnail   [object] - frame link object (see above for full details)
  Example custom frame link object with thumbnail image links...
  
  

Overlay Buttons

Overlay buttons appear on top of the frame content in response to mouseover and click events, or click events only. Touch devices will activate the overlay (if defined) by tapping the frame content or frame content holder. The overlay can be customized to include any button type control (see above).

The overlay is an object which contains three row properties (top, middle, bottom). Multiple controls are added to any one of the 3 overlay row properties as an object with 'left', 'center', or 'right' column properties which creates a 3x3 grid of 9 possible overlay control button locations. It sounds confusing, but is actually quite simple, here is what it looks like...

The code for the above layout is below. First create an overlay object with three property objects (top, middle, bottom), these are the rows. Next we can apply buttons to the rows as shown below...

In the example above all three buttons are applied to the overlays 'bottom' row as shown in the screen grab. Each button control object includes properties which define the column (posiiton:string), dimensions (maxWidth:int, maxHeight:int, minWidth:int, minHeight:int), and URL (src:string) of the button image.

The purpose of the grid layout is the ability for the buttons to auto scale on small devices and large screens. The buttons are auto sized to fit the grid location they belong to. You can set maxes and minimums based on the environment. In a mobile device with a high pixel ratio the buttons will naturally size themselves larger than normal and be easily accessible. On a full size computer screen the images will not be to large, these extremes are defined by the max an min dimensions you set for the button images.

To set specific maximum and minimum button sizes use an environment object for maxWidth, maxHeight, minWidth, and minHeight...

The property above adds a play button to the bottom center grid location. The max width for small mobile devices (smart phones) is set larger so the button is accessible.

The following properties can be applied to your overlay button object...

• position [string] - Set to 'left', 'center', or 'right'. Determines which column to use.
• src [string] - The URL of the button image to use
• align [string] - Alignment of the button within the grid space (e.g. 'top left', 'center center', etc...)
• maxWidth [int | environment object] - The maximum width the button can grow to.
• maxHeight [int | environment object] - The maximum height the button can grow to.
• minWidth [int | environment object] - The minimum width the button can shrink to.
• minHeight [int | environment object] - The minimum height the button can shrink to.

Several overlay CSS classes are available for styling the background container and buttons...

The example CSS above adds a nice semi transparent background with a radius border behind the overlay button image. The entire container receives the click event for the button.

• overlay   [object] - overlay object (see above for full details)
  For details on creating overlay objects see the details above and the template parameter files in the download. Below is an example overlay object...
  
  
• overlayShowGrid   [boolean] - true, false
  Turn the grid on to help while designing your overlay controls. A green grid appears and can be used to show how your controls fit to the grid spaces.
• overlayShowOnMouseOver   [boolean] - true, false
  Activate the overlay on mouse over of the frame content. When false, the overlay will only be activated by clicking the frame content. The overlay can always be hidden with mouse out or a click.
• overlayShowDelay   [int] - milliseconds (1/1000 s)
  The time to wait before activating the overlay when moving the mouse over the frame content.
• overlayHideDelay   [int] - milliseconds (1/1000 s)
  The time to wait before hiding the overlay when moving the mouse outside of the frame content.
• overlayRowScale   [object] - {top:string|float, middle:string|float, bottom:string|float}
  Defines the sizing of the overlay grid rows. By default the grids are equally sized. You can increase the height of specific rows by scaling them. The total of the top, middle, and bottom scales must equal 3 or less than 3 if the 'auto' setting is applied.
  
  In the example below the middle row is twice the height of the top and bottom rows...
  
  

  
  Another way to define the above settings is by using the 'auto' option, again the middle row will be twice the height of the top and bottom rows...
  
  
• overlayColumnScale   [object] - {left:string|float, center:string|float, right:string|float}
  Defines the sizing of the overlay grid columns. By default the grids are equally sized. You can increase the width of a specific column by scaling them. The total of the left, center, and right scales must equal 3 or less than 3 if the 'auto' setting is applied.
  
  In the example below the center column is twice the width of the left and right columns...
  
  

  
  Another way to define the above settings is by using the 'auto' option, again the center column will be twice the width of the left and right columns...
  
  

Animation Sequences

All animation sequences are fully customizable and utilize the NodeFire animation library. The library is a CSS style animator which has the capability to transition any numeric based CSS styles from a start to end value utilizing a timeline. Tons of advanced features such as easing, GPU acceleration, multiple clips, multiple tracks, sychronization, and automated style conversion for old IE are included. For complete details see the animation class in the NodeFire API documentation.

The NodeFire API is a stand alone API which does not rely on any third party FrameWorks such as jQuery or Prototype. The API is OpenCubes pupose written library specifically designed to enhance the widgets.

Numerous animation sequences can be applied to the lightbox to enhance frame transitions, loading, and interaction. Below are the animation sequence paramter properties shown in the order they occur...

LightBox Initially Loaded

• blockoutShow - Show the blockout background.
• boxInit - Show the box (initially sized to the minWidth and minHeight in the CSS).
• loadingImageShow - Show the custom loading graphic.
• boxChange - Triggered if the size of the lightbox changes.
• boxCenterChange - Triggered only if the top and bottom bar sizes are different causing an offset center change.
• loadingImageHide - Hide the custom loading graphic.
• boxContentInitShow or boxContentShow - Show the inner box and content.
• topbarShow - Show the top control bar.
• bottombarShow - Show the bottom control bar.

Moving to a New Frame

• topbarHide - Hide the top control bar.
• bottombarHide - Hide the bottom control bar.
• boxContentHide - Hide the inner box and content.
• loadingImageShow - Show the custom loading graphic.
• boxChange - Triggered if the size of the lightbox changes.
• boxCenterChange - Triggered only if the top and bottom bar sizes are different causing an offset center change.
• loadingImageHide - Hide the custom loading graphic.
• boxContentShow - Show the inner box and content.
• topbarShow - Show the top control bar.
• bottombarShow - Show the bottom control bar.

Moving to a New Frame [Loading Image Disabled] - Disabling the loading image requires the frame content to be preloaded and the 'skipLoadingImageIfPreloaded' parameter to be set true.

• topbarHide - Hide the top control bar.
• bottombarHide - Hide the bottom control bar.
• boxContentHide - Hide the inner box and content.
• boxContentShow - Show the inner box and content.
• topbarShow - Show the top control bar.
• bottombarShow - Show the bottom control bar.

Closing a Modal LightBox

• blockoutHide - Hide the blockout background.

Unique Sequences for Maximized / Inline LightBoxes - If defined these sequences override the standard animation sequences above.

• blockoutMaximizedShow - Show the blockout background.
• topbarMaximizedHide - Hide the top control bar.
• bottombarMaximizedHide - Hide the bottom control bar.
• topbarMaximizedShow - Show the top control bar.
• bottombarMaximizedShow - Show the bottom control bar.
• boxContentMaximizedShow - Show the inner box and content.
• boxContentMaximizedHide - Hide the inner box and content.
• boxContentMaximizedBackShow - Show the inner box and content [when moving backwards to a previous frame].
• boxContentMaximizedBackHide - Hide the inner box and content [when moving backwards to a previous frame].

Hide / Show the Overlay Buttons

• overlayShow - Show the overlay.
• overlayHide - Hide the overlay.

Each animation sequence property takes a 3 dimensional array as the value. The array defines a timeline made up of tracks, clips, and style animations. The first level specifies the tracks.

• [track1,track2,track3]

The second level specifies clips...

• [[clip1,clip2,clip3],[clip1],[clip1,clip2]]

The third level specifies syle animations, these are the core objects which are animated. The three clips below are colored red, green, and blue below to make it easier to see...

• [ [[styleAnim1,clipParams1],[styleAnim1,clipParams2],[styleAnim1,styleAnim2,clipParams3]] , [[styleAnim1,clipParams1]] , [[styleAnim1,clipParams1],[styleAnim1,clipParams2]] ]

The above example is a complex timeline with multiple tracks, clips, and styleAnims. The API's player class automatically synchronizes the tracks and styleAnims and plays the timeline frame by frame.

Below is a visual representation of the timeline outlined above. The screen shot is taken from the Visual NodeFire software which includes a visual tool for building animation timelines.

The top ruler shows the number of frames in the timeline. The player will synchronize the animation of all three tracks as well as multiple styleAnim objects applied to a single clip.

Typically your timelines will not be this complex with the lightbox, a simple single clip timeline looks like...

• [[[styleAnim, clipParams]]]

The styleAnim and clipParams are objects which define the CSS style to animate, start and end values, and clip parameters such as the number of frames.

Below is an example of a simple styleAnim object...

Each styleAnim object may contain multiple style transitions...

The clip object includes a host of options which define the frames, GPU boost, the DOM node to apply the styleAnim to, etc...

Now lets put it all together. The code below applies an opacity animation transition on the show loading image sequence...

All the properties, methods, and events are fully covered in the API documention, see... NodeFire API Animation Class

• blockoutShow   [array] - timeline array (see above for more details)
  Specifies the blockout background show animation sequence. Use a timeline array, see above for more details.
• blockoutHide   [array] - timeline array (see above for more details)
  Specifies the blockout background hide animation sequence. Use a timeline array, see above for more details.
• blockoutMaximizedShow   [array] - timeline array (see above for more details)
  Specifies the blockout background show animation sequence for a maximized initial state (typically inline). Use a timeline array, see above for more details.
• loadingImageShow   [array] - timeline array (see above for more details)
  Specifies the loading image show animation sequence. Use a timeline array, see above for more details.
• loadingImageHide   [array] - timeline array (see above for more details)
  Specifies the loading image hide animation sequence. Use a timeline array, see above for more details.
• boxInit   [array] - timeline array (see above for more details)
  Intial box transition sequence, occurs when the lightbox is first shown. Use a timeline array, see above for more details.
• boxChange   [array] - timeline array (see above for more details)
  This animation sequence is triggered if the size of the box changes. This can occur on initial load or between frames (does not apply to maximized boxes).
  
  In most of the templates the animation applied to this sequence creates the smooth resize animation of the box size. Use a timeline array, see above for more details.
• boxCenterChange   [array] - timeline array (see above for more details)
  This animation sequence is triggered if the center location of the box changes. This can occur on initial load or between frames and can be caused by different sized top and bottom control bars.
  
  In most of the templates the animation applied to this sequence causes the box to smothly move to the center while resizing between frames. Use a timeline array, see above for more details.
• boxContentInitShow   [array] - timeline array (see above for more details)
  Content transition sequence, occurs when new frame content is intially shown for the first time after the lightbox loads. Use a timeline array, see above for more details.
• boxContentShow   [array] - timeline array (see above for more details)
  Content transition sequence, occurs when new frame content is shown. Use a timeline array, see above for more details.
• boxContentHide   [array] - timeline array (see above for more details)
  Content transition sequence, occurs before the frame content is hidden. Use a timeline array, see above for more details.
• topbarShow   [array] - timeline array (see above for more details)
  Content transition sequence for the top control bar, occurs when the top bar is shown. Use a timeline array, see above for more details.
• topbarHide   [array] - timeline array (see above for more details)
  Content transition sequence for the top control bar, occurs before the top bar is hidden. Use a timeline array, see above for more details.
• bottombarShow   [array] - timeline array (see above for more details)
  Content transition sequence for the bottom control bar, occurs when the bottom bar is shown. Use a timeline array, see above for more details.
• bottombarHide   [array] - timeline array (see above for more details)
  Content transition sequence for the bottom control bar, occurs before the bottom bar is hidden. Use a timeline array, see above for more details.
• overlayShow   [array] - timeline array (see above for more details)
  Specifies the overlay buttons show animation sequence. Use a timeline array, see above for more details.
• overlayHide   [array] - timeline array (see above for more details)
  Specifies the overlay buttons hide animation sequence. Use a timeline array, see above for more details.
• boxContentMaximizedShow   [array] - timeline array (see above for more details)
  Content transition sequence for maximized boxes only, occurs when new frame content is shown. Use a timeline array, see above for more details.
• boxContentMaximizedHide   [array] - timeline array (see above for more details)
  Content transition sequence for maximized boxes only, occurs before the frame content is hidden. Use a timeline array, see above for more details.
• boxContentMaximizedBackShow   [array] - timeline array (see above for more details)
  Content transition sequence for maximized boxes only. Occurs when a new frames content which is before (back commands) the current frame is navigated to. Use a timeline array, see above for more details.
• boxContentMaximizedBackHide   [array] - timeline array (see above for more details)
  Content transition sequence for maximized boxes only. Occurs when a new frames content which is before (back commands) the current frame is navigated to. Use a timeline array, see above for more details.
• topbarMaximizedShow   [array] - timeline array (see above for more details)
  Content transition sequence for the top control bar in a maximized box, occurs when the top bar is shown. Use a timeline array, see above for more details.
• topbarMaximizedHide   [array] - timeline array (see above for more details)
  Content transition sequence for the top control bar in a maximized box, occurs before the top bar is hidden. Use a timeline array, see above for more details.
• bottombarMaximizedShow   [array] - timeline array (see above for more details)
  Content transition sequence for the bottom control bar in a maximized box, occurs when the bottom bar is shown. Use a timeline array, see above for more details.
• bottombarMaximizedHide   [array] - timeline array (see above for more details)
  Content transition sequence for the bottom control bar in a maximized box, occurs before the bottom bar is hidden. Use a timeline array, see above for more details.