LightBox - Getting Started

Introduction

The NodeFire LightBox is a stand alone inline content and modal dialog style gallery effect. It utilizes our NodeFire API for all animation and DOM interaction which eliminates the need for adapters and third party libraries such as jQuery or Porototype. If you are already using a library such as jQuey, Prototype, etc..., NodeFire will run along side of these without conflict and minimal framework duplication and overhead.

Each lightBox is an object contained within its own name space (NF.lightBox). Add unlimited lightBoxes with differnt styles, functioanility, and content to a single document.

Getting Started

First add the lightbox code to an existing document by referencing the NodeFire LightBox code in your head tag.

Now, tell existing links to open in a lightbox by adding the 'rel' attribute.

That's it, the link will now open 'myimage.gif' in the lightbox. The first property passed in the 'rel' attribute above is a unique gallery id, similar ids will be grouped into galleries. The next property 'params' is optional, and only needs to be defined on the very first A tag for a gallery. The params are fully customizable and define the layout and functionality of the lightBox, CSS is used for the look. Open a templates params and CSS support files to see all the options first hand, additional comments and help are also included.

Inline Galleries

By default galleries open in a modal window in a typical lightbox fashion. However, the boxes can be added inline within the flow of your document to create standard gallery slide show effects. To create an inline gallery simply create a div and set the div's id to match the gallery name you wish to display.

In the above example, because the link is within the container div the slide show will replace the link. To keep your links and use them as thumbnails, simply put them outside of the div

Add as many inline and modal lightBoxe galleries as needed. the inline boxes offer an expand button (upper right corner in the examples above) which will open the inline box as a modal lightbox which fills the window.

Scripted Frames

To define your gallery frames with script alone, add frames to the params object for your lightBox. In the example below the initial params object is obtained from one of the templates included in the download ('nflbParams_default()'), for testing purposes you can use an empty params object such as 'var myParams1 = {}'

To open the gallery use the 'show' method, you can pass a starting index or frame id ('img1','img2',etc...)

In the example above we pass 'document.body' to the new NF.lightBox object. This makes the modal box a child of the body, you can specify any DOM element here to create an inline box, or you can force a modal box on an element other than the body with the force modal option (4th argument passed).

Frame Properties

You can specify details and options for specific frames in your gallery with the various property options. The properties can be applied directly to a links 'rel' attribute or within a scripted frame object.

  • {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} - URL of the resource to use for the frame, or the inline HTML content.
  • {expandSrc:boolean} - 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 inlines styles to the frame content. 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.

In the example code below a new frame is defined via a 'rel' attribute with a specific width and height. When using a 'rel' attribute to define a frame, the src and title are automatically pulled in from the anchor tags 'href' and 'title' attribues.

Below is how the code looks when scripting a frame.

Additional Help

For additional customization information, view the params javascript (.js) and CSS (.css) files for the template you are using (see the download). There are 100's of additional css styles and paramter setting which can be tweaked to make the lightbox look and function as required.

For developers who need API access use the Full API documentation at the links below.