Boxaroo – Advanced Animated Lightbox.

Boxaroo is designed for all experience levels – requiring only 1 setting. After choosing a skin, you can customize your lightbox environments using over 170 powerful settings.

Components – A building block approach.

Preloaders Configure multiple colors and timing options for any included CSS3 preloader. Each lightbox can have a unique preloader.

Captions Support for independent control of caption styling, animation, visibility, scaling, position, scaling ranges, gallery naming, and more.

Counters The counter records progression through galleries. You can swap positions, control language / scaling options and more.

Navigation Buttons You can change the Close, Previous or Next Buttons independently for every Lightbox – Boxaroo handles everything seamlessly.

HTML Elements Each lightbox has 3 optional HTML components for loading custom HTML and javascript functionality into your environments.

Background Overlays An animated color layer loops unlimited colors. Load patterns or images from the assets library for the tile or background layers.

Integrated Assets Library – An unsurpassed value

The included assets library is a massive, growing collection of graphics designed specifically for Boxaroo. Over 70 GraphicRiver items have been carefully prepared, selected and optimized for use with ligthbox design. All assets are organized to allow for incredibly fast customization by number.

Special Effects – The awesome stuff!

Boxaroo includes a stunning variety of hardware-accelerated CSS3 animations designed to work together seamlessly. Quickly create complicated environments and let Boxaroo automatically transition them.

Fibonacci Spirals Add organic Spiral Animations during Open, Close, and/or Navigation. Set the animation axis, direction, radius, number of cycles, speed and more.

Shadows For realistic lighting effects, Boxaroo provides shadow animation controls. Animate the Shadow Color, Blur Radius, Spread, X Distance, Y Distance and Opacity.

Highlights Customize the Highlight Type (shape), position, speed, gradient stops, size and more. You can even pass in arrays of opacities and colors for looping.

Custom Matting Animate Matte widths (per side) and create color animation loops with an unlimited number of colors. You can apply a texture from the assets library.

Borders Animate the Border Width, Color, or Radius (per corner). Like many settings, Border settings resemble CSS – to make things as comfortable as possible.

2D/3D Transforms Set the degree or amount and Boxaroo will handle all the ballistics. Adjust the perspective and combine and chain multiple transformations.

Frame Animations – Looped animation tricks

Frame Animations are optional loops that occur when a lightbox is typically not moving. They can add an incredible level of depth, realism and organic movement to any scenerio as well as extend opening and closing animations into more complex chained transitions.

Frame Animations Some settings have “frame animation” settings. These act as secondary/goto animation points. When enabled, Boxaroo animates the entrance as usual, then seamlessly carries out any Frame Animations. This allows for fluid extensions of the entrance and exit animations as well as looped animations while viewing content.

Advanced Controls Once the lightbox has animated open, the Frame Animation will execute a set number of times. You can control the iterations of the Frame Animation loop, or set it to infinity. You can also control the direction (Normal, Reverse, Alternate and Alternate-Reverse) yielding creative animations. Speed and Easing controls are also available.

Navigation Override The navigation override gives you powerful control over when Frame Animations are applied. Typically, Frame Animations start after the entrance animation is complete. This allows you to tell Boxaroo you want the Frame Animation to occur only during Navigation, rather than when it has finished animating into view.

Lightbox Movement Define where lightboxes enter and exit – for cool effects and creating the appearance that your gallery is on an axis.

Lightbox Effects Working alongside the movement setting, you can also control the size of a lightbox during entrance and exit animations.

Speed and Easing With so many animations occurring at once, Boxaroo cuts out the risk of timing issues by eliminating independent times.

Events – And other goodies

Gallery Navigation Control interaction using 6 navigation events: Navigation Buttons, Keyboard, Mouse Swiping, Gradient Overlays, Touch & Swipe and Mousewheel.

Custom Navigation Control unique aspects of navigation like Required Swiping Distance, Gesture Tolerance, Reverse Navigation Direction and Navigation Axis Selection.

Stacking Order All components are layered in a logical order, but in case you decide to include custom functionality, you can change the stacking order using a single setting.

Device Specific Based on the type of device the user is on (smartphone, tablet or desktop/laptop), Boxaroo can deliver device-specific content for creative or performance purposes.

Class Assignment Each component can have a custom class assigned dynamically. Any CSS3 animations that aren’t controlled by Boxaroo will be applied and animated.

Presentation Controls Set the distance between the edge of the browser and the lightbox. Boxaroo automatically calculates everything for you – allowing for fluid, real-time scaling.

Flexibility – Slideshows, hooks and more

Slideshows Slideshows retain all lightbox settings and are displayed for unique durations – optionally closing on completion.

Counter Customization Countdown progress bars are optional and can be set up with looped color animations to match your lightbox.

Independent Slideshows are independent and can be a one or several lightboxes within a gallery – or even the entire gallery.

Full Size Mode Full size mode uses your content in the image overlay. Use any of the 3 HTML elements to import your own code within a lightbox environment for presentations.

Addons and Skins Boxaroo is fast, modular and provides excellent support for legacy and modern browsers. Modify any of the included CSS/JSON files and sell your own boxaroo skins.

javascript Hooks Built in and ready to extend Boxaroo’s functionality, you can feel confident when calling your custom functions using any of the 12 integrated javascript Hooks.