Categories

.uiLightbox()

Categories: UI

ep.uiLightbox( options )

Subclass: ep

Inherit: (Subclass: ep) .widget()

Plugin: ep.ui.lightbox

Description: Create a lightbox for a given set of images.

  • ep.uiLightbox( options )

    version added: 6.14.0

    options   A map of additional options pass to the method.

The ep.uiLightbox() method creates a lightbox for a given set of images. The lightbox shows the images in a seperate dialog.

  • Create a simple lightbox.

    HTML:
    <ul id="images">
      <li>
        <img
          alt="Bild 1"
          src="ep/ui/lightboxTest_Image1.jpg"
          data-src-m="ep/ui/lightboxTest_Image1.jpg"
          data-src-l="ep/ui/lightboxTest_Image1.jpg"
        />
      </li>
      <li>
        <img
          alt="Bild 2"
          src="ep/ui/lightboxTest_Image2.jpg"
          data-src-m="ep/ui/lightboxTest_Image2.jpg"
          data-src-l="ep/ui/lightboxTest_Image2.jpg"
        />
      </li>
      <li>
        <img
          alt="Bild 3"
          src="ep/ui/lightboxTest_Image1.jpg"
          data-src-m="ep/ui/lightboxTest_Image1.jpg"
          data-src-l="ep/ui/lightboxTest_Image1.jpg"
        />
      </li>
    </ul>
    
    Code:
    ep('#images')
      .uiLightbox({
        images          : '#images img',
        controls        : 'visible',
        caption         : true,
        count           : true,
        thumbs          : true,
        closeOnEscape   : true,
        closeOnClickOut : true
    });
    
    
  • images

    version added: 6.14.0

    A set of images which will be displayed.

    Default: "img"

  • effect

    version added: 6.14.0

    The change over effect.

    Default: "standard"

  • controls

    version added: 6.14.0

    The way the controls will be displayed (auto / visible / hidden).

    Default: "visible"

  • caption

    version added: 6.14.0

    A boolean indication wether to show the caption of the images.

    Default: false

  • count

    version added: 6.14.0

    A boolean indication wether to show the count of the images like (i of n).

    Default: false

  • thumbs

    version added: 6.14.0

    A boolean indication wether to show thumbnails inside the lightbox.

    Default: false

  • closeOnEscape

    version added: 6.14.0

    A boolean indication wether to close the lightbox by pressing the escape button.

    Default: true

  • closeOnClickOut

    version added: 6.14.0

    A boolean indication wether to close the lightbox by clicking outside of the dialog.

    Default: true