Loading ...

Apps and development tools - jQuery Plugins

Lightbox

This plugin provides lightbox function for images. Images may be shown in groups. If a user clicks on an image or link the image is shown in a modal lightbox showing the image itself together with navigation buttons for previous/next image, the image tile and an optional download link.

Includes

Static include:

<tml:include designdb="@afw" ref="include:jquery" o_jquery-plugins="lightbox"/>

Dynamic Include:

requirejs(["jquery-lightbox"], function(LB){...})

Sample:

requirejs(["jquery", "jquery-lightbox"], function($, LB){

    LB.lang="fr"

    LB.labels.fr={

        image_count: "image {1} de {2}"

    }

    $(<selector>).lightbox()

})

Usage

The plugin shows a lightbox on demand. Call .lightbox() on a trigger element (typically a link or an image):

$("a[href$='.jpg'], a[href$='.png'], a[href$='.gif']").lightbox(options)

The above example adds lightbox to all links referring images.

Parameter "options" is an optional JavaScript object. Valid properties are

  • group: specify the name of the image group. Default "default"
  • download: specify if a download button should be displayed. Default: false
  • imageURL: the url of the image to show. Default: attribute "href" for links or "src" for images
  • imageDownloadURL: optional alternative download url.
  • title: the title of the image. Default: attribute "title" or "alt" of image path.

Data attributes

Some of the above config options can also be specified as data attributes:

<a href="myimage.png" data-image-group="holiday" data-image-download="true"><img ...></a>

Available data attributes are:

  • data-image-group
  • data-image-download
  • data-image-url
  • data-image-download-url
  • data-image-title

Global configuration options:

  • $.lightbox.lang: specifies the language to use. Default: "en".
  • $.lightbox.labels: a JavaScript object defining the labels to be used. This object has language codes (de/en/...) as properties that itself must have a property "image_count". Labels for de and en are predefinied. Custom labels for other languages can be added.

Sample:

$.lightbox.lang: "de"