*This forked version adds support for video slides (iframe)

Demo page

This page contains various setups of slick lightbox.

Default

<div class="row" id="default-demo">
  <div class="col-xs-4"><a href="lilac.jpg" target="_blank" class="thumbnail"><img src="lilac.jpg" alt=""></a></div>
  <div class="col-xs-4"><a href="lilac.jpg" target="_blank" class="thumbnail"><img src="lilac.jpg" alt=""></a></div>
  <div class="col-xs-4"><a href="lilac.jpg" target="_blank" class="thumbnail"><img src="lilac.jpg" alt=""></a></div>
</div>

<script type="text/javascript">
  $('#default-demo').slickLightbox();
</script>

Video (iframe)

<div class="row" id="default-demo">
  <div class="col-xs-4"><a href="https://www.youtube.com/embed/gPuI_pbCYOI" target="_blank" class="thumbnail"><img src="http://img.youtube.com/vi/gPuI_pbCYOI/0.jpg" alt=""></a></div>
  <div class="col-xs-4"><a href="lilac.jpg" target="_blank" class="thumbnail"><img src="lilac.jpg" alt=""></a></div>
  <div class="col-xs-4"><a href="https://www.youtube.com/embed/gPuI_pbCYOI" target="_blank" class="thumbnail"><img src="http://img.youtube.com/vi/gPuI_pbCYOI/0.jpg" alt=""></a></div>
</div>

<script type="text/javascript">
  $('#default-demo').slickLightbox();
</script>

Video (more advanced)

<div class="row" id="default-demo">
  <div class="col-xs-4"><a href="https://www.youtube.com/embed/gPuI_pbCYOI" target="_blank" class="thumbnail"><img src="http://img.youtube.com/vi/gPuI_pbCYOI/0.jpg" alt=""></a></div>
  <div class="col-xs-4"><a href="lilac.jpg" target="_blank" class="thumbnail"><img src="lilac.jpg" alt=""></a></div>
  <div class="col-xs-4"><a href="https://www.youtube.com/embed/gPuI_pbCYOI" target="_blank" class="thumbnail"><img src="http://img.youtube.com/vi/gPuI_pbCYOI/0.jpg" alt=""></a></div>
</div>

<script type="text/javascript">
  /**
   * Custom Slick init to load/unload iframe src on events
   */
  $('#default-demo').slickLightbox({
    closeOnBackdropClick : false,
    slick : function ($e) {

      $e.find('.slick-lightbox-slick-iframe').each(function () {
        $(this)
          .attr('data-src', $(this).attr('src'))
          .attr('src', '')
      })

      function clearIframe (slick, index) {
        var $iframe = $(slick.$slides.get(index)).find('.slick-lightbox-slick-iframe')
        if ($iframe.length) {
          setTimeout(function () {
            $iframe.attr('src', '')
          }, slick.options.speed)
        }
      }

      function loadIframe (slick, index) {
        var $iframe = $(slick.$slides.get(index)).find('.slick-lightbox-slick-iframe')
        if ($iframe.length) $iframe.attr('src', $iframe.attr('data-src'))
      }

      /**
       * Return slick instance
       */
      return $e.find('.slick-lightbox-slick')
        .on('init', function (event, slick) {
          loadIframe(slick, slick.currentSlide)
        })
        .on('beforeChange', function (event, slick, currentSlide, nextSlide) {
          clearIframe(slick, currentSlide)
          loadIframe(slick, nextSlide)
        })
        .slick()
    }
  });
</script>

Captions

<div class="row" id="captions-demo">
  <div class="col-xs-4"><a href="lilac.jpg" data-caption="Lorem ipsum 1000/600" target="_blank" class="thumbnail"><img src="lilac.jpg" alt=""></a></div>
  <div class="col-xs-4"><a href="lilac.jpg" data-caption="Lorem ipsum 1010/606" target="_blank" class="thumbnail"><img src="lilac.jpg" alt=""></a></div>
  <div class="col-xs-4"><a href="lilac.jpg" data-caption="Lorem ipsum 1060/636" target="_blank" class="thumbnail"><img src="lilac.jpg" alt=""></a></div>
</div>
<script type="text/javascript">
  $('#captions-demo').slickLightbox({
    caption: 'caption'
  });
</script>

Array of images

<div class="row" id="images-demo">
  <div class="col-xs-12" style="text-align: center; margin-bottom: 20px;"><a class="btn btn-primary" href="#">Open lightbox</a></div>
</div>
<script type="text/javascript">
  $('#images-demo').slickLightbox({
    images: ['lilac.jpg', 'lilac.jpg', 'lilac.jpg']
  });
</script>

Existing slick

<div id="slick-demo">
  <div class="item"><img src="lilac.jpg" alt="" width="480" height="365"></div>
  <div class="item"><img src="lilac.jpg" alt="" width="480" height="365"></div>
  <div class="item"><img src="lilac.jpg" alt="" width="480" height="365"></div>
</div>
<script type="text/javascript">
  $('#slick-demo').slick();
  $('#slick-demo').slickLightbox({
    src: 'src',
    itemSelector: '.item img'
  });
</script>