loading boxaroo demo
build 2.1
boxaroo
advanced, full-featured lightbox environments

unique presentation environments without any coding experience

customizable skins

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.

One

Two

Three

Four

Five

Six

skins get boxaroo up and running quickly with a single setting and allow for a fast way to customize lightbox environments

components - a building block approach

Preloaders

  • 10 CSS3 preloaders
  • GIF for legacy browsers

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

Captions

  • say what you want
  • anywhere on the screen

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

Counters

  • display progress

  • with style

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


movement

positioning

interface

color   layer

tile   layer

image   layer



Navigation Buttons

  • choose buttons from the
  • built-in assets library

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

HTML Elements

  • extend boxaroo using
  • 3 empty containers

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

Background Overlays

  • mix and match 3 overlays

  • color | tile | image

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

customize lightboxes at the image level, gallery level or multiple galleries at a time - with unparalleled flexibility

assets library - an unsurpassed value

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

Boxaroo

boxaroo is adaptive and automatically scales to any device at any resolution - without having to mess with media queries

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

  • with legacy browser support

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

Shadows

  • powerful control

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

Highlights

  • lighting control

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


spirals

shadows

highlights

mattes

components

3D effects



Custom Matting

  • photographers rejoice

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

  • with full animation support

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

  • flip, rotate, skew, translate, scale

Set the degree or amount and Boxaroo will handle all the ballistics. Adjust the perspective and combine and chain multiple transformations.

Position components using 25 preset locations.
Give boxaroo 2 positions and automatically animate from the first position to the second.

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

  • how they work

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

  • iterations and direction

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

  • application levels

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.


rotations

flipping

skewing

scaling

translation

combinations



Lightbox Movement

  • 8-directional control

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

Lightbox Effects

  • shrink || grow || match

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

Speed and Easing

  • precise animation

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

With no coding experience required, you'll
be happy to know you can leave your designer hat on

events - and other goodies

Gallery Navigation

  • keyboard || mouse || finger || stylus

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

Custom Navigation

  • advanced options

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

Stacking Order

  • from the bottom up

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

  • delivering what is important

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

  • adding more style

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

  • go ahead... resize the window

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

6 customizable ways to navigate your content
Navigation Buttons, Keyboard, Mouse Swiping, Gradient Overlays, Touch & Swipe and Mousewheel

flexibility - slideshows, hooks and more

Slideshows

  • customize and enable

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

Counter Customization

  • countdown to awesome

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

Independent

  • not your typical slideshow

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 moves the Lightbox image into the background and removes the Lightbox. 3 Animated HTML Element Components allow you to inject any code you want directly into the environment. This allows Boxaroo to handle any content and maintain its scalability and customization options.


> Art courtesy of: ZUCO

full size

navigation

modular

slideshows

timers

hooks


Full Size Mode

  • perfect for presentations

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

  • sell your boxaroo 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

  • for the JS junkies

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.

When encountering smaller devices boxaroo adjusts for performance and maximizes content display size - allowing it to run perfectly on smartphones that are 5+ years old