Automatically adapts to any device dimensions and resolution.
Ships with 6 carefully crafted Skins to choose and customize - or build your own.
A building-block approach for
unsurpassed customization.
No complicated CSS or strict HTML.
Built for beginning and advanced users.
Boxaroo is created for all experience levels and only requires 1 setting - the Skin - making it easy enough to use if you're new to HTML. Once a Skin has been loaded, any additional settings you apply will automatically override Skin settings - allowing Boxaroo Skins to act as customization launchpads. All of the demos below are setup using only 3 lines.
Skins get Boxaroo up and running quickly with 1 setting, but also act as a starting point for customization. You can apply a Skin to an entire gallery, then optionally continue customizing the gallery using additional settings. Boxaroo settings can also be applied to specific images inside the gallery using the data-boxaroo attribute.
Configure multiple colors and timing options for any of the 10 CSS3 Animated Preloaders. Similar GIFs will automatically be presented for Legacy Browsers. Each Lightbox can have it's own unique Preloader.
Each Lightbox Item offers full and independent control over its Caption Styling, Animation Settings, Visibility, Scaling, Position, Scaling Ranges, Gallery Name, and more. Captions can be different for every Lightbox.
The Counter records a user's progress through a Gallery. Instead of generic text, you can customize it to say whatever you like - per Lightbox. You can also swap positions, control language / scaling options and much more.
Changing the Navigation Buttons couldn't get easier - just pick a number corresponding to the button you like. You can change the Close, Previous or Next Buttons independently for every Lightbox Item if you like. Boxaroo will handle all the transitions seamlessly.
Ever wish you could just easily drop a bit of code into your existing Lightbox for a unique and custom solution? Each Lightbox Item has 3 unique and optional Components that you can quickly load any DIV into. Boxaroo also loads any events attached to your DIV.
Each Lightbox Item has 3 unique Overlays. An Animated Color Layer will loop through any number of colors you give it. Choose from over 130 seamless patterns for the Tile Layer. Load backgrounds from a specific path, or use a number to load one from the Assets Library.
Boxaroo is all about making it easy to build and customize unique Lightbox Environments - and make each one different from the last. Tailor your Lightboxes at the Image level, Gallery Level or multiple Galleries at once - with unparalleled flexibility. Boxaroo is simple to use, fully compatible with CMS systems, and powerful enough to mimic the design of nearly every Lightbox plugin available - making it ideal for both beginners and advanced users.
The Assets Library is a huge collection of Graphics assembled over the course of 2 months and designed specifically for Boxaroo. It includes includes 60 GraphicRiver Items in addition to hundreds of premium graphics files. All Assets have been carefully optimized, named numerically and organized into folders. With 725+ premium Backgrounds, 100+ Navigation Buttons, 100+ Seamless Tiles, Hover Icons and a lightning-fast "pick-by-number" approach - changing Lightbox Graphics has never been this much fun.
Forget about responsive - Boxaroo dynamically adapts to any screen size at any resolution. Without a need to dig through tangled Media Queries, Boxaroo focuses on delivering a fast and fluid experience across all resolutions and display sizes. Boxaroo also supports a Fixed Layout Mode and includes options to toggle scalability and define scaling ranges for each Component.
Boxaroo includes a stunning variety of hardware-accelerated CSS3 animations designed to work together seamlessly. Built-in feature detection (no Modernizr required) handles all of the fallback JavaScript animation (using requestAnimationFrame when possible). Animations auto-adjust depending upon plugin situations such as the existence of other effects, or during specific user events.
Spirals can add a nice organic touch to Lightbox animations. Boxaroo allows you to configure Spiral Animations to occur during Open, Close, and/or Navigation. Set the axis for the animation, direction, radius, number of animation cycles, speed and more.
For that extra lighting realism, Boxaroo provides powerful shadow animation control. Animate the Shadow Color, Blur Radius, Spread Radius, X Distance, Y Distance and Opacity. Animated Drop Shadows can also optionally scale.
Animated Highlights add another layer of realism to your content. Customize the Highlight Type (shape), position, speed, gradient stops, size and much more. You can even pass in arrays of opacities or colors for Highlight animation loops.
Add some Spiral Animations to your Lightboxes with a couple simple settings. Control the In, Out and Navigation Speeds, Radius, Direction, Number of Cycles and more.
Boxaroo includes full support for animated Lightbox Shadows. Use Shadows for Glow Effects, blurring Lightbox borders or inside Frame Animation Loops for pulsating animations.
Highlights are optional reflective accents and are highly configurable. They automatically adapt to any 2D/3D Transformations applied to the Lightbox - for added realism.
(Use Arrow Keys, Swipe or Hover over the Lightbox to Navigate)
Mattes can be sized differently per side, be simple colors, animated Color Loops or repeating Tiles - all unique to each Lightbox. Boxaroo automatically handles the transitions for you.
(Use Arrow Keys, Swipe or Hover over the Lightbox to Navigate)
All Components can animate into view by simply setting the start and end positions. Configure 2D/3D Hover Effects, Opacities, Animation Timing, Dynamic Class Assignment and many Component-specific settings such as Counter Keyword Selection, Full Width Captions and more.
Boxaroo is packed with powerful 2D and 3D Transformation settings. Rotate, Tilt, Flip, Translate, Skew and Scale to your hardware-accelerated heart's desire - with perspective control. Use 2D/3D Transformations during Navigation, as stopping points or during Frame Animations.
Photographers rejoice - Boxaroo delivers full Matte Controls to the Lightbox. Animate Matte Widths (per side) and create color animation loops with an unlimited number of colors. You can apply a texture from the bountiful Assets Library with a single number. Animated Mattes can also optionally scale.
Gain full animation control over your Lightbox Borders. Animate the Border Width, Color, or Radius (per corner). Animated Borders can also optionally scale. Like many Boxaroo settings, Border settings are modeled after CSS syntax - to make things as comfortable and familiar as possible.
Apply 2D and 3D CSS3 Animations to individual Lightboxes with ease. Just set the degree or amount of the transformation and Boxaroo will handle all the animation ballistics. Use multiple transformations, adjust the perspective, and even chain them with Frame Animations (animations that kick in once the Lightbox has entered).
To keep things simple, 25 pre-defined locations are setup on the screen. Just pick a number to position any Component. If you use 2 position numbers, Boxaroo will animate your Component from the first position to the second. Boxaroo also includes settings to offset the Component position for greater positioning precision.
Just set rotation angles along with optional animation settings and let Boxaroo handle the rest. Rotate once, a specific number of times, during navigation only or inside an infinite loop.
Flip Lightboxes along the X or Y axis independently. Flip Animations are highlighy configurable with perspective control, complete 360+ degree support, smart setting adjustments built-in, automatic transition handling during navigation and much more.
Throw Skews into your Animation Combos for some interesting distortion effects. Skew Transformations support all of the exciting features that other Frame Animation Transformations support, as well as independent axis control.
Looped Scale Transformations can provide an interesting and subtle effect, adding an organic element and breathing life into the environment. Scaling supports all scenarios including starting large/small, grow/shrink, independent width/height control, and smart Boxaroo transitions.
Animate the Lightbox along the X and Y axis independently or use Translations to offset the static position of your Lightbox. Couple Translations with other Frame Animation Transformations for incredible animation control.
Have fun creating crazy Frame Animation combinations for wild effects.
Subtle Frame Animation combinations are perfect for simulating organic movements.
Frame Animations are optional animation loops that occur when a Lightbox is typically sitting still. They can add an incredible level of depth and realism to any scenerio as well as extend opening and closing animations into more complex chained transitions.
Several settings have sister Frame Animations settings. They can be understood as the secondary animation point for that setting. When Frame Animations are enabled, Boxaroo will animate a Lightbox entrance as usual, then seamlessly carry out any Frame Animations. This allows for fluid extensions of the entrance and exit animations as well as looped animations while viewing content.
Once the Lightbox has animated open, the Frame Animation will execute a set number of times. You can control the number of times the Frame Animation should loop, or set it to infinity. You can also control the direction of Frame Animation (Normal, Reverse, Alternate and Alternate-Reverse) yielding creative animations. Speed and Easing controls are also available.
The Navigation Override control gives you a powerful option of how you want Frame Animations applied to your Lightbox Item. Typically, Frame Animations are initiated after the Lightbox Entrance Animation has completed. The Navigation Override Setting allows you to tell Boxaroo you want the Frame Animation to occur during Navigation, rather than when it has finished animating into view.
Every Lightbox Item allows you to control what part of the screen the Lightbox enters and exits. Aside from customizing animations, this allows for creating an illusion that your Gallery is aligned along an axis. Choose an off-screen location, or even use the Origin option to make it appear like the Lightbox is emerging from it's thumbnail. Boxaroo takes measures to make sure all animation settings work well with your movement settings.
The Lightbox Size Effect setting works in conjuction with the Ligthbox Movement setting. Where the movement setting controls the entrance/exit position, the Size Effect setting controls how the Lightbox's dimensions will be affected. Shrink will set the Lightbox to the full dimensions of the screen and shrink to it's final size. Grow will set the dimensions to 0 and grow to it's final size. Match will maintain Lightbox dimensions.
With so many animation effects and different options occurring at once, timing could quickly become a problem. Boxaroo cuts out the risk of timing issues by eliminating independent animation times and basing all animation effects around the Lightbox. Control the timing and easing of the Lightbox and all animation effects will elegantly follow suit. The Lightbox Content allows for Fading options using separate timing controls.
No coding experience is required, and Boxaroo takes a mere 3 lines of code for a complete setup - the rest is optional customization. All settings are as simplified as possible and many directly match CSS syntax. Boxaroo builds the animations for you, and changing graphics is a matter of picking numbers. You'll be happy to know you can leave your designer hat on.
Boxaroo provides 7 customizable ways for user Navigation: (Keyboard, Virtual Mouse Swiping, Gradient Navigation Overlays, Touch, Swipe, Stylus and the Mousewheel) - allowing you to choose how users interact with your content. Additionally, Boxaroo allows you to control many aspects of navigation events such as Required Swiping Distance, Gesture Tolerance, Reverse Navigation Direction, Navigation Axis Selection and much more.
Although Boxaroo comes packing extensive Hover Effects options, you may already have a special plugin, or your own effects. Boxaroo is able to yield to your preferred plugin or code. This makes it perfect for effortlessly retaining existing thumbnail styles and effects in templates and themes. Boxaroo Thumbnail Effects have Icon and Caption Modes, and include a ton of options like 2D/3D Transformation hover effects.
All Components are layered in a logical order - with navigation elements taking priority. However, in case you decide to get tricky and include custom Lightbox interactivity or functionality through the HTML Element Component(s) you can change the stacking order with a single setting. Boxaroo allows you to shuffle how Components are layered on every Lightbox Item.
Boxaroo is a mix of CSS3 Transitions, CSS3 Keyframe Animations and JavaScript Animations. Feature detection is used to give hardware-accelerated CSS3 animations priority. Experiment with your Lightbox customizations and compare tightly written JavaScript animation performance against CSS3 performance - in specific browsers. You might be surprised.
Just in case Boxaroo doesn't have a setting for what you're trying to achieve, you can dynamically assign classes to any Component and the Lightbox. These classes are applied before Components are displayed on screen and cleared when a Lightbox is closed, or when the user Navigates. Any CSS properties that are able to animate, and not controlled by a Boxaroo setting, will.
An important aspect of any Lightbox is image handling. Rather than controlling the size of the image, Boxaroo allows you to control the distance between the edge of the browser and the Lightbox - calculating everything else for you. This allows for fluid, real-time scaling. Content is preloaded using AJAX and you can optionally deliver different content to tablets and/or mobile devices.
Boxaroo provides 7 customizable ways users can navigate your content to insure the utmost level of comfort. Boxaroo supports Touch Events, Gestures, Virtual Mouse Events, Keyboard navigation, Stylus control, MouseWheel interaction and customizable Gradient Navigation Bar Overlays.
Slideshows retain all defined settings. Slides can be displayed for unique durations and the Slideshow can optionally close on completion. Use Slideshows with Full Size Mode and HTML Elements for a full presentation platform.
Slideshows can optionally display a standard countdown progress bar. Both elements of the progress bar can be customized and set up with looped color animations to match your Lightbox Environment.
Slideshows can be a couple of Lightboxes inside a Gallery or the entire Gallery itself. You can even use multiple slideshows within the same Gallery, or use a single image for a Slideshow.
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.
Full Size Mode removes the Lightbox from the environment and uses the Background Image Overlay for content placement. All customization options remain available and you can use animated HTML Element Components to accentuate content or add interactivity.
The Boxaroo Box Mock-Up above is just an HTML Element, go ahead and give it a hover.
Animate Image Blurs, Grayscale, Sepia, Hue Rotations, Brightness, Contrast and Saturation - in hardware accelerated glory (limited browser support).
Setup your Lightboxes however you like, then just enable Slideshows with one setting.
They can even begin and end inside Galleries.
Customize the Slideshow Counter position, size, direction and color animations.
Hooks allow you to use custom functions at specific times based on events or interaction. To make things easy, this refers to the Boxaroo Object, containing all Boxaroo Elements.
Full Size Mode gets the most out of your content by making it full screen. All defined settings remain untouched and you still have control over Boxaroo Components. You can apply Full Size Mode to a single Lightbox within a Gallery and Boxaroo will automatically toggle between Standard and Full Size Modes during navigation.
Although still in the experimental stages and with limited browser support, CSS Image Filter Animations will give you a little extra something to have fun with. Animate Image Blurs, Grayscale, Sepia, Hue Rotations, Brightness, Contrast and Saturation - in hardware accelerated glory. When the time comes, Boxaroo is ready.
Just in case there is something truly specific that Boxaroo has missed, JavaScript Hooks are built in and ready to extend Boxaroo's functionality. Feel confident calling your custom functions to action with any of the 12 Boxaroo's JavaScript Hooks. The this keyword inside your function references the Boxaroo Object - which neatly contains all elements.
适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。
来源：站长素材