QuickBox.js can be dropped into a page and immediately called to initialize the thumbnail images.
The MooTools framework 1.2+, both Core and More, with the following packages:
Core: Core, Native, Class, Element, and FX Packages.
More: Asset Package.
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 are passed in the QuickBox constructor as the first argument.
| Option | Accepts | Default | Description |
|---|---|---|---|
| resizeDuration |
|
600 | The duration for the resize animation. |
| resizeTransition |
|
Fx.Transitions.Circ.easeOut | The transition to use for the animation. For a list of other transition types, see the MooTools documentation. |
| initialWidth |
|
250 | The initial width for the box to start out at. |
| initialHeight |
|
250 | The initial height for the box to start out at. |
| padding |
|
10 | The padding for the image inside the box. |
| animateCaption |
|
true | Set to true to show the caption below the image. |
| counter |
|
Image {NUM} of {TOTAL} | The counter below the image caption. {NUM} and {TOTAL} will be replaced with the respective numbers. |
p, b, Left Arrow - Previous image.
n, f, Right Arrow - Next image.
esc, q, x - Close the box.