NodeFire Library

lightBox  1.0.6

NodeFire Library > lightBox > NF.lightBox
Search:
 
Filters

Class NF.lightBox

Creates a lightBox effect based on parameter setting or existing links within the document. LightBoxes can be modal based and fit the size of the browser window or embeded inline within the HTML. Any number of inline or modal boxes, each with different styling and functionality, can be added to a single document. To add a new lightBox with script only, create a new lightBox object and call the 'show' method.


Adding lightBox Frames w/ The 'REL' Attribute

To create lightboxes with HTML alone (no scripting required), add a 'rel' attribute to links within the document...
<a rel="NF.lightBox={id:'myid'}" title="my title" href="mylink.png">link content</a>
Links (referred to as frames) with similar IDs will be grouped into gallery slide shows. The values within the brackets are parameter settings defined the same way as an object literal. e.g. To scale an image or other resource to 1/2 its natural size...
<a rel="NF.lightBox={id:'myid', scale:.5}" title="my title" href="mylink.png">link content</>
Any frame based parameter option that can be passed to the lightBox objects contructor (see below) may also be specified as part of the 'rel' attribute for a link. You can further pass a variable name or function that defines all the configuration properties for your lightBox with the params property. The params must be defined on the first tag for the gallery that the DOM encounters.
<a rel="NF.lightBox={id:'myid', scale:.5, params:my_param_variable}" title="my title" href="mylink.png">link content</>
The full configuration paramters can also be passed to a lightBox constructor.
myvar = new NF.lightBox('myid',my_param_variable);


Creating Inline lightBoxes

You can embed an inline lightBox within the documet flow by simply adding A tags to a container with a matching gallery ID...
<div id='myid' class='nflb-inline'>
   <a rel="NF.lightBox={id:'myid'}" title="my title" href="mylink1.png">link content</>
   <a rel="NF.lightBox={id:'myid'}" title="my title" href="mylink2.png">link content</>
</div>
Links that are defined outside of your inline container that have a matching gallery id will be included. Outside links are automatically set to navigate to the associated gallery frame when clicked (style active states for the outside links in the CSS!). Links within the inline container are replaced by the lightBox. However, in browsers without JavaScript the links and associated content will remain as a pure CSS alternative.


Configuration Paramter Options

The parameter options are passed as the second argument in the lightBox contructor. The settings are defined using an object literal and specify all lightbox features and behavior. The look of the lightBox is styled with CSS (see the .css file for the template you are working with).

LightBox frames can optionally be specified as a nested object literal within your params configuration object. Frames defined in this manner will be added to any existing frames specified for the object using the 'rel' attribute (discussed above). Defining frames within your params object...
var my_params;
my_params.frames = {};
my_params.frames.myFrame1 = {src:'myimage1.png', scale:1, title:'my title1'};
my_params.frames.myFrame2 = {src:'myimage2.png', scale:1, title:'my title2'};
You can shorthand the above as follows, however with lots of settings it's easier to go line by line with a variable as shown above...
var my_params = {frames:{myFrame1:{src:'myimage1.png', scale:1, title:'my title1'},myFrame2:{src:'myimage2.png', scale:1, title:'my title2'}}}
Below are some of the basic parameter options which can be used to define a frame. For additional details and a first hand look at the numerous paramter options which can be used to configure the layout and functionality of the lightBox see the .js file for the template you are working with.
  • {id:string} - The gallery or lightBox id, only required with params set through the 'rel' attribute.
  • {params:object literal} - The complete configuration params for the lightBox, optional and only necessary when setting params with the 'rel' attribute.
  • {src:string} - Location and file name of the resource to use for the frame. When used within a 'rel' attribute you can optionally set the src value to 'innerHTML' to grab the tags content as inlineHTML for the frame. If a src is set on a 'rel' attribute it will override the tags 'href' attribute setting as the src for the frame.
  • {expandSrc:string} - Optional alternate 'src' location and file name to use with an expanded lightbox.
  • {width:int} - Optional for images and inline HTML, if omitted the width will automatically be determined.
  • {height:int} - Optional for images and inline HTML, if omitted the width will automatically be determined.
  • {scale:float} - Scales the frame from its set or natural size (e.g. .5=half size, 2=double size, etc...).
  • {title:string} - Title description for the frame. With tag set 'rel' frames, the title attribute will be used if present.
  • {styles:object literal} - Apply inline styles to the frame resource. e.g. styles:{border:'1px solid #f00', backgroundColor:'#000'}
  • {killOverlay:boolean} - Disables the overlay for the frame.
  • {stretchFit:boolean} - Stretch the frame content to fit the inner box vs. preserving the aspect ratio.
  • {overlayFillContainer:boolean} - Fill the entire inner container with the overlay or match its size to the frames content only.
  • {frameID:string} - Applied as the frames unique ID when specified within a 'rel' tag. If not specified a default ID is applied.

Constructor

NF.lightBox ( id , config , parent , isModal )
Parameters:
id <string> The id for the lightbox. This is the id or gallery name that will be used to identify and associate frames with the lightBox object.
config <Object> Object literal specifying the configuration properties and optionally frames for the lightbox. See above for more details.
parent <DOM Node> Specify a parent node for inline lightBoxes, by default the lightBox will be modal and use document.body for the parent container.
isModal <boolean> Force inline lightboxes or boxes with a parent container other than document.body to behave like a modal lightbox, yet constrained to the specified parent container.

Properties

child - NF.lightBox

The child lightbox if any, this property points to the exapanded (see the expand option under the executeCommand method) modal lightbox created from an inline lightbox. The child lightbox does not exist until the inline box creates a child with the expand option.

id - string

The lightBox id (gallery id)

isInline - boolean

The inline status of the lightbox. Inline boxes flow within the page content.

isModal - boolean

The modal state of the lightbox. Modal boxes fill the entire view port of the borwser window vs. inline boxes which flow within the page content.

params - object literal

The lightBox configuration paramters.

parent - NF.lightBox

The lightBox parent. This applies to modal expanded lightboxes, the parent property points to the inline lightbox which created the child.

parentContainer - DOM Node

The lightBox parent container.

Methods

addFrame

object | false addFrame ( frameId , frameObject )
Adds a frame to the lightBox. If the lightbox is visialbe or inline, the new frame will be displayed.
Parameters:
frameId <string> The id for the new frame.
frameObject <object> Object literal containing the frame settings. Typical options include...
  • {src:string} - Location and file name of the resource to use for the frame.
  • {width:int} - Optional for images and inline HTML, if omitted the width will automatically be determined.
  • {height:int} - Optional for images and inline HTML, if omitted the width will automatically be determined.
  • {scale:float} - Scales the frame from its set or natural size (e.g. .5=half size, 2=double size, etc...).
  • {title:string} - Title description for the frame. With tag set 'rel' frames, the title attribute will be used if present.
  • {styles:object literal} - Apply inlines styles to the frame resource. e.g. styles:{border:'1px solid #f00', backgroundColor:'#000'}
Returns: object | false
If the frame ID did not already exist and the frame was added the new frame object is returned.

executeCommand

boolean executeCommand ( command )
Executes a lightbox command. The lightbox must be finished animating for the command to execute.
Parameters:
command <string> The command name to execute.
  • 'navnext' - Navigates to the next frame in the gallery.
  • 'navprevious' - Navigates to the previous frame in the gallery.
  • 'navfirst' - Navigates to the first frame in the gallery.
  • 'navlast' - Navigates to the last frame in the gallery.
  • 'navplay' - Play the gallery.
  • 'navpause' - Pause the gallery.
  • 'zoomplus' - Zooms in, must be an image or inline HTML.
  • 'zoomminus' - Zooms out, must be an image or inline HTML.
  • 'maximizebox' - Maximize the lightbox window to fit the view port.
  • 'maximizecontent' - Maximize the frame content to fit the view port (minus your lightbox window sizing and blockout padding).
  • 'expand' - Expands the lightbox to a modal window. Applies to inline lightboxes only.
  • 'close' - Close the lightbox. Applies to modal lightboxes only.
Returns: boolean
True if the command executed.

focus

void focus ( )
Focus the lightbox which allows for keyboard control. Note: Focus automatically changes based on user actions on other elements and lgihtboxes in the document.
Returns: void

getActiveFrame

string | object | node getActiveFrame ( returnType )
Gets the active frame
Parameters:
returnType <string> The type of data to return 'id', 'object', 'node'... the default is 'id'.
Returns: string | object | node
The frame id, params object, or DOM node. The lightbox frame must have completed all animation transitions and be visible in order to return the active node.

getFrameIds

array getFrameIds ( )
Returns an array of frame ids currently added to the lightBox.
Returns: array
Array of frame ids.

getFrameObject

object getFrameObject ( frameId )
Returns a frame object.
Parameters:
frameId <string> The id of the frame object to return.
Returns: object
Frame parameter object.

isPlaying

boolean isPlaying ( )
Returns the playing status of the lightbox gallery. If false the playing is paused / stopped.
Returns: boolean
Play Status: (true=playing, false=paused)

isVisible

boolean isVisible ( )
Returns the visible status of the lightbox. Always returns true with an inline box.
Returns: boolean
Visible Status

navigateTo

void navigateTo ( frameId )
Navigate to a specific gallery frame.
Parameters:
frameId <string || int> The frame id or index position of the frame object.
Returns: void

refreshLightBox

void refreshLightBox ( frameId )
Refreshes the lightbox. This method will redraw all configuration paramters and update the frames.
Parameters:
frameId <string> The id for the default frame to show if the lightbox is already visible.
Returns: void

removeFrame

object | false removeFrame ( removeFrameId , showFrameId )
Removes a frame from the lightBox. If the lightbox is visialbe or inline, the showFrameId will be displayed.
Parameters:
removeFrameId <string> The id of the frame to remove.
showFrameId <string> The id of the new frame to show if the lightbox is visible.
Returns: object | false
If the frame ID did not already exist and the frame was added the new frame object is returned.

resize

void resize ( )
Resize the lightbox.
Returns: void

show

void show ( frameId )
Shows the lightbox. This applies to both inline and modal lightboxes. This method is responsible for initializing the modal or inlnie lightbox the first time its called.
Parameters:
frameId <string | int> The frame id or index position to display upon showing the lightbox.
Returns: void

Events

addedToDOM

addedToDOM ( event )
Fires when the lightbox is created and added to the DOM. Occurs when first shown or when shown after a refresh.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Object} The lightBox object which dispatched the event.

boxPositioned

boxPositioned ( event )
Fires when the lightbox is positioned on the screen or re-centered during resizing animations.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Object} The lightBox object which dispatched the event.
  • {boxContainer:node} The lightbox container node.

boxResized

boxResized ( event )
Fires when the lightbox is resized.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Object} The lightBox object which dispatched the event.
  • {boxContainer:node} The lightbox container node.

buttonClicked

buttonClicked ( event )
Fires when a lightbox button is clicked.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Object} The lightBox object which dispatched the event.
  • {button:node} The buttons DOM node.
  • {buttonType:string} The type of button clicked.

commandExecuted

commandExecuted ( event )
Fires when a lightbox command is executed.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Object} The lightBox object which dispatched the event.
  • {commandType:string} The executed command type.

focused

focused ( event )
Fires when the lightbox recieves the focus.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Object} The lightBox object which dispatched the event.

frameContentAdded

frameContentAdded ( event )
Fires when a frames content is added. This happens right before the frame content is animated and not when the box is re-sizing or the loading icon is visible.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Object} The lightBox object which dispatched the event.
  • {frameContent:node} The frame content node.

frameNavigation

frameNavigation ( event )
Fires when a new lightbox gallery frame is navigated to.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Object} The lightBox object which dispatched the event.
  • {frameId:string} The frame id navigaed to.

keyDown

keyDown ( event )
Fires when the lightbox has the focus and a key down event is dispatched.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Object} The lightBox object which dispatched the event.
  • {domEvent:Object} The original DOM keyboard event (contains the keyCode and other properties).

outerLinkActiveStylesApplied

outerLinkActiveStylesApplied ( event )
Fires when the active style class names ('nflb-outside-link-active', etc...) are applied to an outside link belonging to an inline lightbox.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Object} The object which triggered the event.
  • {link:node} The DOM HTML node for the outer link.
  • {frameId:string} The frame Id.

propertyHookUpdated

propertyHookUpdated ( event )
Fires when a dynamic property hook reference is updated. This occurs when a custom property hook grabs data from the current frame. e.g. A title is updated, or the zoom level is update, etc...
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Object} The lightBox object which dispatched the event.
  • {newContent:string} The new displayed content.
  • {hookStatement:node} The new displayed content.
  • {node:node} The node where the newContent was applied.

transitionsFinished

transitionsFinished ( event )
Fires when the lightbox is finished transitioning to the active frame.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Object} The lightBox object which dispatched the event.
  • {frameId:string} The active frames id.

transitionsStarted

transitionsStarted ( event )
Fires when the lightbox starts transitioning to a new frame.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:Object} The lightBox object which dispatched the event.
  • {frameId:string} The active frames id.
Copyright © 2012 OpenCube: Inc. All rights reserved.