Demo page

This page contains various setups of slick lightbox.

Default

<div class="row" id="default-demo">
  <div class="col-xs-4"><a href="http://placekitten.com/1000/600" target="_blank" class="thumbnail"><img src="http://placekitten.com/1000/600" alt=""></a></div>
  <div class="col-xs-4"><a href="http://placekitten.com/1010/606" target="_blank" class="thumbnail"><img src="http://placekitten.com/1010/606" alt=""></a></div>
  <div class="col-xs-4"><a href="http://placekitten.com/1060/636" target="_blank" class="thumbnail"><img src="http://placekitten.com/1060/636" alt=""></a></div>
</div>

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

Captions and history API

You can close the lightbox by navigating "back" in the browser.

<div class="row" id="captions-demo">
  <div class="col-xs-4"><a href="http://placekitten.com/1000/700" data-caption="Lorem ipsum 1000/700" target="_blank" class="thumbnail"><img src="http://placekitten.com/1000/700" alt=""></a></div>
  <div class="col-xs-4"><a href="http://placekitten.com/1010/706" data-caption="Lorem ipsum 1010/706" target="_blank" class="thumbnail"><img src="http://placekitten.com/1010/706" alt=""></a></div>
  <div class="col-xs-4"><a href="http://placekitten.com/1060/736" data-caption="Lorem ipsum 1060/736" target="_blank" class="thumbnail"><img src="http://placekitten.com/1060/736" alt=""></a></div>
</div>
<script type="text/javascript">
  $('#captions-demo').slickLightbox({
    caption: 'caption'
    useHistoryApi: 'true'
  });
</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: ['http://placekitten.com/1000/600', 'http://placekitten.com/1010/606', 'http://placekitten.com/1060/636']
  });
</script>

Existing slick

<div id="slick-demo">
  <div class="item"><img src="http://placekitten.com/1000/600" alt="" width="480" height="300"></div>
  <div class="item"><img src="http://placekitten.com/1010/606" alt="" width="480" height="300"></div>
  <div class="item"><img src="http://placekitten.com/1060/636" alt="" width="480" height="300"></div>
</div>
<script type="text/javascript">
  $('#slick-demo').slick();
  $('#slick-demo').slickLightbox({
    src: 'src',
    itemSelector: '.item img'
  });
</script>

Custom layout

<div id="custom-layout-demo" class="row">
  <div class="col-xs-4"><a href="http://placekitten.com/1000/600" target="_blank" class="thumbnail"><img src="http://placekitten.com/1000/600" alt=""></a></div>
  <div class="col-xs-4"><a href="http://placekitten.com/1010/606" target="_blank" class="thumbnail"><img src="http://placekitten.com/1010/606" alt=""></a></div>
  <div class="col-xs-4"><a href="http://placekitten.com/1060/636" target="_blank" class="thumbnail"><img src="http://placekitten.com/1060/636" alt=""></a></div>
</div>
<script type="text/javascript">
  $('#custom-layout-demo').slickLightbox({
    layouts: {
      closeButton: '<span style="position: absolute; top: 10px; right: 10px; color: red;">aww yeah</span>'
    }
  });
</script>

Prevent opening

<div id="prevent-opening-demo" class="row">
  <div class="col-xs-4"><a href="http://placekitten.com/1000/600" target="_blank" class="thumbnail"><img src="http://placekitten.com/1000/600" alt=""></a></div>
  <div class="col-xs-4"><a href="http://placekitten.com/1010/606" target="_blank" class="thumbnail do-not-open" style="opacity: 0.5; cursor: not-allowed;"><img src="http://placekitten.com/1010/606" alt=""></a></div>
  <div class="col-xs-4"><a href="http://placekitten.com/1060/636" target="_blank" class="thumbnail"><img src="http://placekitten.com/1060/636" alt=""></a></div>
</div>
<script type="text/javascript">
  $('#prevent-opening-demo').slickLightbox({
    shouldOpen: function(slickLightbox, $clickedElement){
      if ($clickedElement.hasClass('do-not-open')) {
        alert('Will not open on .do-not-open!');
        return false;
      } else {
        return true;
      }
    }
  });
</script>

Lazyloading

<div id="lazy-demo" class="row">
  <div class="col-xs-2"><a href="http://placekitten.com/1000/600?foo=bar" target="_blank" class="thumbnail"><img src="http://placekitten.com/1000/600" alt=""></a></div>
  <div class="col-xs-2"><a href="http://placekitten.com/1010/606?foo=bar" target="_blank" class="thumbnail"><img src="http://placekitten.com/1010/606" alt=""></a></div>
  <div class="col-xs-2"><a href="http://placekitten.com/1060/636?foo=bar" target="_blank" class="thumbnail"><img src="http://placekitten.com/1060/636" alt=""></a></div>
  <div class="col-xs-2"><a href="http://placekitten.com/1080/600?foo=bar" target="_blank" class="thumbnail"><img src="http://placekitten.com/1080/600" alt=""></a></div>
  <div class="col-xs-2"><a href="http://placekitten.com/1100/606?foo=bar" target="_blank" class="thumbnail"><img src="http://placekitten.com/1100/606" alt=""></a></div>
  <div class="col-xs-2"><a href="http://placekitten.com/1200/636?foo=bar" target="_blank" class="thumbnail"><img src="http://placekitten.com/1200/636" alt=""></a></div>
</div>
<script type="text/javascript">
  $('#lazy-demo').slickLightbox({
    lazy: true
  });
</script>