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.
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.
Below are some of the templates included in the download.
The NodeFire LightBox can support a host of media types which are auto detected based on the resources file name.
Video resources are automatically smart switched between HTML5, Flash, and QuickTime to use the best possible player based on browser and OS.
Full compatability in all mobile devices is supported. Extended gesture features for iPad, iPhone, and Android devices include...
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.
A multitude of animaion sequences for both show and hide are each fully customizable using the NodeFire style animation library. Animation sequences include...
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.
The top and bottom control bars are extremely customizable. Below are a few key features...
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.
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.
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...
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.
Full keyboard control is included by default, regardless of the buttons included in your control bars.
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.
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.
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 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...
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.