API

Options

Options can be set using the data-lightview-options attribute:

<a href="image.jpg" class="lightview" data-lightview-options="skin: 'mac'">Show Image</a>

Or when used with groups, the data-lightview-group-options attribute.

<a href="image1.jpg" 
   class="lightview" 
   data-lightview-group="options_example" 
   data-lightview-group-options="controls: 'thumbnails'">Image 1</a>
<a href="image2.jpg" 
   class="lightview" 
   data-lightview-group="options_example">Image 2</a>
<a href="image3.jpg" 
   class="lightview" 
   data-lightview-group="options_example">Image 3</a>

When using the Javascript API these would translate to:

Lightview.show({ url: 'image.jpg', options: { skin: 'mac' } });
Lightview.show(['image1.jpg', 'image2.jpg', 'image3.jpg'], { controls: 'thumbnails' });
  • ajax

    Allows extra options to be set when using ajax as your media type.

    ajax: {
      type: 'post',
      data: { id: 3, page: 17 }
    }
    ajax: { data: 'id=4&page=22' }

    The afterUpdate callback can be used to call a function to interact with the inserted content.

  • background

    Sets a background color for the window and optional opacity:

    background: '#fff'

    To add opacity use an object:

    background: { color: '#fff', opacity: .5 }
  • border

    Sets border size, color and opacity:

    border: 1
    border: { size: 3, color: '#000', opacity: .6 }

    Note: When the position of the radius is set to border with a size larger then that of the border, the border will increase to make room for the radius. If you run into the border not disappearing it's probably because radius is set this way.

  • continuous

    When set to true a group becomes a continuous loop, keeping navigation buttons enabled at all times:

    continuous: true
  • controls

    Sets position and options of the controls. The default is relative which positions the controls relative to the window, top sets the controls fixed at the top of the screen:

    controls: 'top'

    With every type the close button can positioned using relative, top or disabled by using false:

    controls: { close: 'top' }

    With relative controls the slider with numbers and slideshow can be disabled:

    controls: { type: 'relative', slider: false }

    Set the number of items the slider uses per page through the items options, the default is 5:

    controls: {
      type: 'relative',
      slider: { items: 3 }
    }

    A loading icon can be set for thumbnails by providing a spinner option. mousewheel can also be toggled using this options

    controls: { 
      thumbnails: {
        spinner: { color: '#777' },
        mousewheel: false
      }
    }
  • effects

    Sets the duration of individual effects, or disables them when set to false.

    effects: false

    These are all the available options:

    effects: {
      caption: { show: 180, hide: 180 },
      content: { show: 280, hide: 280 },
      overlay: { show: 240, hide: 280 },
      sides:   { show: 150, hide: 180 },
      spinner: { show: 50,  hide: 100 },
      slider:  { slide: 180 },
      thumbnails: { show: 120, hide: 50, slide: 180, load: 340 },
      window:  { show: 120, hide: 50, resize: 220, position: 180 }
    }
  • flashvars

    Sets flashvars on a flash movie using key/value pairs.

    flashvars: {
      file: 'video.mp4',
      autostart: true
    }
  • initialDimensions

    The dimensions the window has when it comes into view, before it resizes to its content.

    initialDimensions: {
      width: 100,
      height: 100
    }
  • height

    Sets a maximum height of the content.

    height: 500

    Note: The viewport option can modify this value when enabled, disable it to keep the value intact.

  • keyboard

    Enable or disable individual keyboard buttons or all of them when set to false. Useful for when the content requires keyboard interaction.

    keyboard: false

    Use an object to toggle individual buttons:

    keyboard: {
      left: true,
      right: true,
      esc: false,
      space: false
    }
  • mousewheel

    Enables or disables the mousewheel navigation, the default is true.

    mousewheel: false
  • overlay

    Sets the color, opacity and toggles the close event of the overlay.

    overlay: {
      close: true,
      background: '#202020',
      opacity: .85
    }
  • padding

    The padding around the content within the window. Often set to 0 when the content should be the only thing visible.

  • params

    Sets values normally set using an object or param tags, can be used with quicktime and flash:

    params: {
      autoplay: true,
      controller: false
    }
  • position

    Sets the position of the window in relation to the viewport, with optional offset.

    Possible position are center and top:

    position: 'top'
    position: { at: 'top', offset: { x: 0, y: 100 } }

    An integer can be used as a shortcut for the above:

    position: 100
  • preload

    Preloads this item if it is an image when the item next to it is shown, defaults to true:

    preload: true
  • radius

    Sets the radius of the background or the border.

    radius: 10

    The position of the radius can be set by using an object. Possible values are background and border.

    radius: { size: 10, position: 'border' }
  • shadow

    When set to true a shadow will appear underneath the window, false will disable it:

    shadow: false

    The shadow can be styled using an object that has blur, color and/or opacity set:

    shadow: { blur: 5 }
    shadow: {
      blur: 3,
      color: '#54718e',
      opacity: .5
    }
  • skin

    Sets the skin, Options from this skin will be applied as a starting point for other options. Available skins are: black, light and mac.

    skin: 'light'

    See the Skins section for more on creating and customizing skins.

  • slideshow

    Enabled or disable the slideshow button and sets the delay in between slides.

    slideshow: false

    To set the slideshow delay in miliseconds use:

    slideshow: 5000

    Note: Disabling the slideshow for an entire group will hide the slideshow button. Disabling it for an element within a group will cause the slideshow to stop at that position, useful when including video content.

  • spacing

    Sets spacing around the window based on the type of controls used. horizontal sets the spacing on the left and right side, vertical on top and bottom.

    spacing: {
      relative: { horizontal: 60, vertical: 60 },
      thumbnails: { horizontal: 60, vertical: 60 },
      top: { horizontal: 60, vertical: 60 }
    }

    The close button on relative controls is affected by this since its position is related to Lightview window. Here's how the 'mac' skin sets this position, when modifying the relative spacing on custom skins the CSS might have to be adjusted:

    .lv_window_mac .lv_button_top_close {
      top: 39px;
      left: 39px;
    }
  • spinner

    Options that configure the loading icon. Documentation for the possible options is available on the Spinners GitHub page.

    spinner: {
      radii:     [32, 42],
      color:     '#808080',
      dashWidth: 1,
      dashes:    75,
      speed:     .7
    }

    The loading icon within thumbnails can be configured using the controls option.

  • thumbnail

    Sets a thumbnail image for use with the thumbnail controls. Images have a thumbnail based on their source image by default, this option can be used to set an alternative. For every other type this option will have to be set to generate a thumbnail:

    thumbnail: 'thumbnail.jpg'

    Using an Object instead makes it possible to set an icon type to overlay the thumbnail. Possible values are false and 'video'.

    thumbnail: { image: 'thumbnail.jpg', icon: 'video' }
  • viewport

    Sets the resizing method used to fit content within the viewport, or disables resizing when set to false. Disabling this option will also disable the repositioning that happens when scrolling or resizing the browser window, so that hidden content can be reached:

    viewport: false

    Content can be scaled or cropped to fit, when scale is used the content will scale proportionally:

    viewport: 'scale'

    When using crop whatever doesn't fit within the viewport will be cut off, creating a scrollbar to get to the hidden portion of the content:

    viewport: 'crop'

    Note: It's recommended to disable this option when using forms so that resize and scroll events triggered by mobile browser keyboards won't cause the window to move.

  • width

    Sets a maximum width of the content.

    width: 600

    Note: The viewport option can modify this value when enabled, disable it to keep the value intact.

  • wrapperClass

    Adds a classname to the element that wraps the inserted content.

    wrapperClass: 'custom'

Contents

Sign in