Andrew Plummer - Design Development Translation

QuickBox.js

Overview

QuickBox.js can be dropped into a page and immediately called to initialize the thumbnail images.

Requirements

The MooTools framework 1.2+, both Core and More, with the following packages:

Core: Core, Native, Class, Element, and FX Packages.
More: Asset Package.

Usage

Getting Started

QuickBox is very easy to start using. Just link your thumbnails to the full size images, and set the rel attributes to quickbox:

<a href="/path/to/fullsize.jpg" rel="quickbox"> <img src="/path/to/thumbnail.jpg" alt="Image Description" /> </a>

Then, simply link to the source files (css file in the head) and call the constructor:

<head> <link rel="stylesheet" type="text/css" href="/path/to/quickbox.css" /> </head> <script type="text/javascript" src="/path/to/MooToolsCore.js"></script> <script type="text/javascript" src="/path/to/MooToolsMore.js"></script> <script type="text/javascript" src="/path/to/QuickBox.js"></script> <script type="text/javascript"> new QuickBox(); </script>

That's it! You can now click on your thumbnails and they will open the full size images in the same page. Captions for the images will be taken from the alt attribute of the thumbnails, unless you override it by specifying a title attribute in the links.

If things don't look quite right, double check that the links to the image resources (the close and left/right buttons) aren't broken.

Options

Options are passed in the QuickBox constructor as the first argument.

Option Accepts Default Description
resizeDuration
  • Number
600 The duration for the resize animation.
resizeTransition
  • MooTools Transition
Fx.Transitions.Circ.easeOut The transition to use for the animation. For a list of other transition types, see the MooTools documentation.
initialWidth
  • Number
250 The initial width for the box to start out at.
initialHeight
  • Number
250 The initial height for the box to start out at.
padding
  • Number
10 The padding for the image inside the box.
animateCaption
  • Boolean
true Set to true to show the caption below the image.
counter
  • String
Image {NUM} of {TOTAL} The counter below the image caption. {NUM} and {TOTAL} will be replaced with the respective numbers.

Shortcut Keys

p, b, Left Arrow - Previous image.

n, f, Right Arrow - Next image.

esc, q, x - Close the box.