NodeFire LightBox [ Advanced Gallery Slide Show Effects Widget ]

Introduction
Image Gallery Sample
More Samples / Templates
Supported Media
iPad / iOS / Android
Animation Features & Sequences
Top & Bottom Control Bars
Overlay Buttons
Keyboard Control
Inline Slide Show Sample
API Documentation
Minimal Code Size

Introduction

Easily create inline or modal (lightbox style) gallery effects. Tons of advanced resizing features keep content perfectly fit to the users browser window or inline container no matter the size. Mobile devices are fully accounted for. Extended features like swipe frame left / right, pinch zoom, double tap, rotate, etc... are specifically written for Apple iPad / iOS and Android devices.

The NodeFire LightBox is a stand alone gallery slide show widget. The widget does not rely on any 3rd party JS frameworks like jQuery or Prototype. Instead the LightBox utilizes OpenCubes purpose written NodeFire animation and dom libraries.

Gallery effects can be easily incorporated into any website without writting JavaScript. Advanced developers can optionally harness the extensive LightBox API.

Image Gallery Sample [Modal LightBox]

Adding a lightbox like above to your page is very simple. First add a reference to the NodeFire LightBox code in your head tag.

Now, tell any existing links to open in a lightbox by adding the 'rel' attribute. Group into galleries by using similar ids.

More Samples / Templates

Below are some of the templates included in the download.

Supported Media

The NodeFire LightBox can support a host of media types which are auto detected based on the resources file name.

Images - GIF, JPEG, PNG, or any browser supported image format.
Local Video - Flash player, QuickTime, or HTML5 Video Tags are all supported.
Remote Video - Youtube (old and new formats), Yahoo, Goolge, Etc...
Inline HTML - Accepts any Inline HTML
iFrame - Loads any local or remote page link.

Video resources are automatically smart switched between HTML5, Flash, and QuickTime to use the best possible player based on browser and OS.

iPad, iOS, and Android Mobile Devices

Full compatability in all mobile devices is supported. Extended gesture features for iPad, iPhone, and Android devices include...

Swipe Left / Right - Swipe to the next or previous frame.
Pinch Zoom Images - With modal boxes page zoom is disabled and pinch zooming is applied to the frame content only.
Drag Images - Drag images with a finger after pinch zooming.
Double Tap - Double tap content to maximize modals full screen, or customize the behavior.

Most settings can be specifically defined for a particular environment (mobile / browser / OS, etc...). The default template includes a series of enlarged button images for small devices which allows for easy manipulation of the LightBox.

Animation Features & Sequences

A multitude of animaion sequences for both show and hide are each fully customizable using the NodeFire style animation library. Animation sequences include...

Blockout Show / Hide - Animates the semi-transparent blockout background.
Loading Image Show / Hide - In the image sample above the animated loading .gif image fades in and out.
Box Container Init - Animates the initial box container show.
Box Transition Change - Animates the box between frames.
Box Transition Change Center - Occurs when the boxes center moves due to a change in control bar height between frames.
Box Content Show / Hide - Animates the box frame content (images, video, html, etc...) on show and hide.
Top Control Bar Show / Hide - Animates the top control bar on show and hide between frames.
Bottom Control Bar Show / Hide - Animates the top control bar on show and hide between frames.
Overlay Show / Hide - Animates the overlay button on show and hide.

All animations are optionally GPU accelerated. Control bars and the box content transitions can be specifically customized for a maximized box. The NodeFire animation library allows for any combination of numeric based CSS styles on any of the above sequences to be animated using movie style clips and tracks.

Top & Bottom Control Bars

The top and bottom control bars are extremely customizable. Below are a few key features...

Controls - Change the location of any control (button, text, frame links). Remove or duplicate any control type.
Styles - Containers, buttons, images, and frame links are all 100% CSS customizable.
Positioning - Top and bottom bars can sit on top of the box or slide from underneath.
Frame Links - Use numbers, HTML, or thumbnail images for frame links, specify tons of frame link features.
Property Hooks - Custom hooks allow button and text controls to by dynamically generated from the current frame properteis.
Keyboard Control - Navigate the gallery, zoom, maximize, expand, play and pause, + more with the keyboard.

Controls bars can dynamically change size between frames (e.g. a frames title text takes two lines vs 1). A special customizable animation sequence transitions the box center when the control bar size changes between frames.

Overlay Buttons

Up to 9 overlay buttons may optionally be applied. The overlay is activated on hover and click, or click only. The overlay is a 3x3 grid of possible button locations, the rows and columns of the grid are sizeable or default to equal sizing.

Buttons within the grid are dynamically sized based on the content size they overlay. This allows the buttons to be functional on small mobile devices. Special overlay buttons can be applied to specific environments such as a large close button for mobile devices only.

The developer mode displays a grid which makes adjusting padding, margins, rows, and column sizing simple.

Developer Mode - Screenshot

Custom Control Options

A host of control options are easy to customize and place in any location on the top and bottom control bars, or within the overlay. Each custom control you define can be given a unique name which is specifically CSS customizable (image, fonts, borders, etc...). The following are the control types which may be defined...

Spacer - Adds distance between controls (can be px or %)
Navigate Next - Button / content that navigates to the next frame.
Navigate Previous - Button / content that navigates to the previous frame.
Navigate First - Button / content that navigates to the first frame.
Navigate Last - Button / content that navigates to the last frame.
Frame Indicator - Show the location of the current frame (can be anything, '1/5', '1 of 5', 'frame 1 of 5 total', etc..)
Zoom Minus - Button / content that zooms in.
Zoom Plus - Button / content that zooms out.
Zoom Indicator - Show the zoom level(can be anything, '100%', '5x', 'etc...')
Play - Button / content that plays the slide show gallery.
Pause - Button / content that pauses the slide show gallery
Play Animation - Animated count down timer until next frame(customize all aspects)
Maximize Content - Button / content that maximizes the content to fit the browser window space (minus blockout padding)
Maximize Box - Button / content that maximizes the lightbox to fit the browser window
Expand - Button / content that expands an inline box to a full modal window.
Text Control - Use any content, dynamically generate with hooks to grab title, size, and other frame info.
Frame Links - Links to specific frames with numbers, text, or thumbnail images (auto generated), tons of options.
Close - Button / content that closes a modal lightbox.

Each control can optionally be used any number of times and placed at any location within the top and bottom bars. See the templates paramter script files within the download for a first hand look and more information.

Keyboard Control

Full keyboard control is included by default, regardless of the buttons included in your control bars.

ESC - Close (modal boxes only)
Left / Right Arrows - Next or Previous Frame
CTRL+ Left / Right Arrows - First or Last Frame.
Tab / Shift+Tab - Next or Previous Frame
Up / Down Arrow - Maximize / Minimize Content
CTRL+Up / CTRL+Down Arrow - Maximize / Minimize Box
Plus Key (+) - Zoom In (images and inline content only)
Minus Key (-) - Zoom Out (images and inline content only)
(P) Key - Play
(S) Key - Pause / Stop
(X) Key / Space Bar - Expand the inline lightbox (opens in a modal window)
Enter - Restore 100% Zoom or Expand

Inline Slide Show Sample

Inline boxes are simple to create and are capable of expanding to full modal boxes (to test, use the expand button at the upper right corner of the box).

To specify an inline container as a lightbox gallery, add an 'ID' attribute that matches the gallery id you wan't to display.

If you want your frames anchor tags to double as frame navigation buttons for the lightbox, move the links outside of the container.

[View Example]

Several CSS classes allow for a custom active state to be applied to your outside links. The active state is applied when the links frame is shown within the inline LightBox. This example uses CSS to apply a red border around the thumb when active.

NodeFire LightBox API

A comprehensive API is avialable for developers who need to integrate the box within a web based application. Use the links below to access the complete API documentation.

The NodeFire LightBox API does not require or rely on any 3rd party JavaScript frameworks. All required code and the full purpose writen NodeFire API is included in the single 'nf_lightbox.js' script file within the download.

LightBox Code Size

The compressed (GZipped) code weighs in at only 24K! This includes all the NodeFire animation and dom libraries, plus the full LightBox w/ API and all features.

When comparing our footprint to others don't forget capabilites unique to the NodeFire LightBox...

No 3rd Party Framework Required - Makes our box simple to implement and reduces the potential for future compatability issues.
Full Inline and Modal Galleries - 99% (maybe all others) are one or the other, but not the best of both in one package.
Extensive Features & Customization - Included features and customization goes well beyond any other lightbox on the market.
More API Methods and Properties - Our API is hands down the most comprehensive you will find in any slide show or lightbox.
Class Leading Mobile Support - The NodeFire lightbox really stands alone with its extensive iPad and Android support.

We think you will find that when comparing the code to the top two or three feature rich lightboxes available, we are smaller on the box code and framework with anywhere from 50% to 100% more features and options.