LighterBox

A very lightweight lightbox with a bare minimum of features, packaged for the Rails asset pipeline:

  • Displays a single image (with caption) or arbitrary content loaded via Ajax.
  • Fully accessible (note that all UI alt texts and titles are in german).
  • Gallery mode (navigation between related images / contents).
  • Supports nested lightboxes.

Requirements

Requires a recent jQuery version (may work with Zepto, too).

Designed to work with current browsers (including minor workarounds to make sure it’s not completely broken in IE9).

Installation

Add lighter_box to your Gemfile. Use sprockets directives to include the code in your JS/CSS:

//= require "lighter_box"

@import "lighter_box"

Usage

Create a new instance of LighterBox.Ajax or LighterBox.Image, with the link element referencing the target image or content as parameter.

A common pattern is to do this in a event handler like this:

$("body").on "click", "a[data-lightbox]", (ev) ->
  ev.preventDefault()
  if $(this).data("lightbox-mode") == "ajax"
    new LighterBox.Ajax(this)
  else
    new LighterBox.Image(this)

Configuration via attributes

The following attributes on the source element (link) can be used to customize LighterBox:

  • data-lightbox-class: Additional css class names for the lightbox modal.
  • data-lightbox-group: Used for gallery mode: Next / previous links will be displayed to allow navigation between lightboxes for source elements that share the save value for this attribute. Hidden source elements are ignored, so the gallery mode works well with all sorts of client side filtering.

Image lightbox only:

  • data-lightbox-caption: Image caption. If not set, the image’s alt text is used as caption.
  • data-lightbox-caption-allow-html: If present, the image caption is interpreted as HTML.

Ajax lightbox only:

  • data-lightbox-fragment: A jQuery selector to specify the portion of the remote document to be loaded into the lightbox (similar to the fragment feature of jQuery.load()).
  • data-lightbox-href: The URL that to be loaded into the lightbox. If not set, the link’s href attribute is used.

Events

The following events will be triggered on the lightbox modal element:

  • lighter-box-content-loaded: When the content has been completely loaded (lightbox already visible).
  • lighter-box-will-hide: Before the lightbox elements (modal, container and backdrop) are removed from the DOM.

Event handlers will get passed the lightbox instance as second parameter (after the event object).