CNET JS Code Documentation

Class: Slimbox

A lightbox clone for Mootools.

Authors

Implements

Syntax

new Slimbox(options);
 

Arguments

  • options - (object) a set of key/value options

Options

  • anchors - (array) a group of anchors to which to add lightbox functionality; defaults to $$('a[rel=lightbox]').
  • resizeDuration - (integer) duration in milliseconds for the resize effect; defaults to 400
  • resizeTransition - (function) optional Fx.Transitions transition reference
  • initialWidth - (integer) the initial width of the box; defaults to 250
  • initialHeight - (integer) the height width of the box; defaults to 250
  • zIndex - (integer) zindex for the overlay; defaults to 10
  • overlayStyles - (object) styles object to pass to Element.setStyle for the modal layer (so you can set it to be whatever color or opacity you like). Note that the default styles are located in the (external) css file.
  • animateCaption - (boolean) slide the caption in smoothly; defaults to true
  • showCounter - (boolean) shows the number of images in the set; defaults to true
  • autoScanLinks - (boolean) scan the document for anchor tags with rel tags == the relString option (only used if the anchors option is undefined); defaults to true
  • relString - (string) the string value for the "rel" tag that will make the link use the lightbox; defaults to 'lightbox'. Unused if the anchors argument is specified.
  • useDefaultCss - (boolean) injects the default css for the lightbox; defauls to true.
  • assetBaseUrl - (string) the url where the css and image assets are (a directory); defaults to "http://www.cnet.com/html/rb/assets/global/slimbox/". See CNET.assets.

Events

  • onImageShow - (function) optional callback fired when an image is displayed; passed two arguments: the index of the image shown and the image element shown.
  • onDisplay - (function) optional callback fired when the lightbox first shows up (onImageShow is fired just after this for the first image displayed and all subsequent images displayed if a set is shown). Passed no arguments.
  • onHide - (function) optional callback fired when the lightbox is closed. Passed no arguments.

Element Storage

Each image managed by the instance will have a property called "lightbox" stored that will retrive the instance.

Examples

new Lightbox(); //defaults; scans the document for rel="lightbox...
new Lightbox({
    anchors: $$('a.lightbox'), //use all anchor tags with class "lightbox" instead
    autoScanLinks: false
});
 

Note

A new Lightbox is created on DomReady, so it is not required that you write any javascript at all. All you must do is add rel="lightbox" to your images (and rel="lightbox[setName]" for sets). If you want to create a Lightbox on the fly or with some other set of images, you can do that whenever you like.