API

API

The alternative to using the HTML based approach is using the Javascript API. The API has all the options of the HTML approach and provides some useful extra functions that help with customization and interaction.

  • Lightview.show()

    This function is at the core of the API, it can be used to show a single item or a group.

    Lightview.show( url )

    url
    string
    A string representing the url of the file.

    Lightview.show( Element )

    Element
    object
    An Element Object, allowing for more values to be passed in than just the url.

    Element = { url [ , caption ] [ , title ] [ , type ] [ , options ] }

    url
    string
    A string representing the url of the file. By leaving out type the media type will automatically be detected.
    caption
    string
    The caption underneath the content.
    title
    string
    The title above the caption.
    type
    string
    Specifies the media type. Required when the type cannot be detected based on the urls file extension. One of: image, quicktime, flash, iframe, inline, ajax or html
    options
    object
    An object containing a list of Options.

    Lightview.show( elements [ , options ] [ , position ] )

    elements
    array
    An array of Elements.
    options
    object
    An object containing a list of Options that will be applied to all the elements. Options set on individual elements will overwrite these options.
    position
    number
    The position to open within the elements, defaults to 1.

    Lightview.show( elements [ , position ] )

    elements
    array
    An array of Elements.
    position
    number
    The position to open within the elements, defaults to 1.

    Lightview.show( HTMLElement )

    element
    HTMLElement
    An HTMLElement that has the required HTML attributes set.

    Lightview.show( url )

    The most basic usage of Lightview.show is passing it a string. Lightview will then attempt to detect the correct way to show the file using its extension.

    jQuery(document).ready(function($) {
      $('#demo_api_basic').bind('click', function(event) {
        // stops default click behavior
        event.preventDefault(); 
    
        Lightview.show('image.jpg');
      });
    });
    Show image

    Lightview.show( Element )

    Using an Element Object instead makes it possible to pass in more values and Options.

    jQuery(document).ready(function($) {
      $('#demo_api_video').bind('click', function(event) {
        // stops default click behavior
        event.preventDefault();
    
        Lightview.show({
          url: '/movies/movie.mov',
          type: 'quicktime',
          title: 'Javascript API',
          caption: 'This video was shown using the Javascript API',
          options: {
            width: 640,
            height: 272,
            params: {
              controller: false
            }
          }
        });
      });
    });
    Show video

    Being able to set the type is useful when Lightview won't be able to detect it based on the file extension:

    Lightview.show({
      url: '/movies/swfs/32124',
      type: 'flash',
      options: { width: 500, height: 400 }
    });

    The href attribute used in the HTML approach translates directly to the url used in the API. This means that for inline type, the url also becomes the id of the element to pull inline.

    <a href="#" id='show_inline'>Show inline</a>
    <div id="inline_example" style="display:none">This element is pulled into Lightview.</div>
    
    <script type='text/javascript'>
    $(document).ready(function() {
      $('#show_inline').bind('click', function(event) {
        event.preventDefault();
        Lightview.show({ url: 'inline_example', type: 'inline' });
      });
    });
    </script>
    
    
    Show inline

    Lightview.show( elements [ , options ] [ , position ] )

    Groups can be shown by using an array of strings or objects, or a combination of both:

    Lightview.show([
      'image1.jpg',
      'image2.jpg',
      { url: 'video.mov', options: { height: 640, height: 272 } }
    ]);

    The second parameter can be used to provide options for the entire group.

    Lightview.show(['image1.jpg', 'image2.jpg', 'image3.jpg'], {
      skin: 'light',
      controls: 'top'
    });
    Group with grouped options

    Any options defined on individual objects will overwrite what's provided using the options parameter:

    Lightview.show([{
      url: '/player/player.swf', 
      options: {
        flashvars: { file: '/videos/video1.mp4' }
      }
    }, {
      url: '/player/player.swf', 
      options: {
        flashvars: { file: '/videos/video2.mp4' }
      }
    }, {
      url: '/player/player.swf', 
      options: {
        height: 620,
        width: 480,
        flashvars: { file: '/videos/video3.mp4' }
      }
    }], {
      width: 640,
      height: 272
    });

    The position at which Lightview opens can be set with the last argument. Here is an example that combines jQuery with the API to create a group from a single link, opening at the second position.

    <a href="#" id="demo_api_group">Open group at 2nd position</a>
    
    <script type="text/javascript">
    jQuery(document).ready(function($) {
      $('demo_api_group').bind('click', function(event) {
        // stops default click behavior
        event.preventDefault();
    
        Lightview.show([
          { url: 'image1.jpg' },
          { url: 'image2.jpg' },
          { url: 'image3.jpg' }
        ], { skin: 'mac' }, 2);
      });
    });
    </script>
    Grouped options at 2nd position

    Lightview.show( elements [ , position ] )

    When passing in a group of elements setting options is not required. Using a number as the last argument will then set the opening position:

    Lightview.show(['image.jpg', 'movie.mov', 'flash.swf'], 3); // opens at 3th position

    Lightview.show( HTMLElement )

    An HTMLElement that has the required Lightview attributes set can be shown:

    Lightview.show($('#element_id')[0]);
  • Lightview.hide()

    Hides the Lightview window when visible.

    Lightview.hide();
  • Lightview.play()

    Starts the slideshow and optionally jumps to the next item in the group.

    Lightview.play( instant )

    instant
    boolean
    When set to true, jumps to the next item instead of starting with a delay. The default is false.

    This function requires a group to be loaded, use it in the onShow callback for example:

    onShow: function() {
      Lightview.play();
    }

    Setting the instant parameter will start the slideshow by jumping to the next item:

    Lightview.play(true);
  • Lightview.stop()

    Stops the slideshow.

    Lightview.stop();
  • Lightview.refresh()

    Adjusts the dimensions of the window to its current content and centers it. Use this function after making updates that affect content dimensions. Works for inline and ajax content.

    Lightview.refresh();
  • Lightview.setDefaultSkin()

    Sets the name of the default skin, this skin will be used when no skin option is provided.

    Lightview.setDefaultSkin( skin )

    skin
    string
    The name of the default skin, defaults to 'dark'.

    This function should be called after the lightview.js include or after a file that defines custom skins, for example:

    <script type='text/javascript' src='/js/lightview/lightview.js'></script>
    <script type='text/javascript' src='/js/lightview/lightview-custom-skin.js'></script>
    
    <script type='text/javascript'>
      Lightview.setDefaultSkin('mac');
    </script>

Contents

Sign in