Responsive Gallery Lightbox With jQuery And Slick.js - slick-lightbox

slick-lightbox is a jQuery plugin for responsive gallery lightbox that where users are able to switch between images in a carousel-like lightbox popup based on slick.js carousel plugin.

Key features:

• Image lazy load.
• Keyboard interactions.
• Supports browser History API.
• Custom layouts.
• Event handlers.

How to use it:

1. Include the necessary jQuery library and slick.js carousel plugin's files on the page.

<link href="/path/to/slick.min.css" rel="stylesheet">
<link href="/path/to/slick-theme.min.css" rel="stylesheet">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/slick.min.js"></script>

2. Download and include the slick-lightbox plugin's files on the page.

<link href="dist/slick-lightbox.css" rel="stylesheet">
<script src="dist/slick-lightbox.js"></script>

3. Create a group of images to be presented in the gallery lightbox.

<div id="default">
  <a href="1.jpg" target="_blank">
    <img src="thumb-1.jpg" alt=""></a>
  </div>
  <a href="2.jpg" target="_blank">
    <img src="thumb-2.jpg" alt=""></a>
  </div>
  <a href="3.jpg" target="_blank">
    <img src="thumb-3.jpg" alt=""></a>
  </div>
  ...
</div>

4. Call the function on the top container to initialize the gallery lightbox with default settings.

$('#default').slickLightbox();

5. All default customization options.

$('#default').slickLightbox({
  
  // background color of overlay
  background: 'rgba(0,0,0,.8)',

  // close on ESC
  closeOnEscape: true,

  // close on backgroun drop click
  closeOnBackdropClick: true,

  // in milliseconds
  destroyTimeout: 500,

  // default item selector
  itemSelector: 'a',

  // allows keyboard navigation
  navigateByKeyboard: true,

  // How to get the image urls? If false, no src is taken as the href attribute.
  // You can pass your own function accepting the element as an attribute (e.g. function(element) { return $(element).doSomething(); }) or a string with the name of the attribute to be fetched (src will get the value of element.src attribute).
  src: false,

  // shows captions
  caption: false,

  // or 'bottom'
  captionPosition: 'dynamic',

  // uses image array instead
  images: false,

  // slick.js opitons
  slick: {},

  // uses Histroy API
  useHistoryApi: false,

  // custom layout
  layouts: { closeButton: '<button type="button" class="slick-lightbox-close"></button>' },

  // a function that checks the return value before opening
  shouldOpen: null,

  // max height of images
  imageMaxHeight: 0.9,

  // enable image lazy load
  lazy: false

});

6. API methods.

var myInstance = $('#default').slickLightbox();

// Creates individual slides to be used with slick. If options.images array is specified, it uses it's contents, otherwise loops through elements' options.itemSelector.
myInstance.createModalItems()

// Creates a slick-friendly modal.
myInstance.createModal()

// Runs slick by default, using options.slick if provided. If options.slick is a function, it gets fired instead of us initializing slick. Merges in initialSlide option.
myInstance.initSlick(index)

// Opens the lightbox.
myInstance.open()

// Closes the lightbox and destroys it, maintaining the original element bindings.
myInstance.close()

// Binds global events.
myInstance.bindEvents()

// Moves the slick prev or next.
myInstance.slideSlick(direction)

// Detects usage of IE8 and lower.
myInstance.detectIE()

// Returns caption for each slide based on the type of options.caption.
myInstance.getElementCaption(el, info)

// Returns src for each slide image based on the type of options.src.
myInstance.getElementSrc(el)

// Unbinds global events.
myInstance.unbindEvents()

// Destroys the lightbox and unbinds global events. If true is passed as an argument, unbinds the original element as well.
myInstance.destroy(unbindAnchors)

// Destroys lightboxes currently in DOM.
myInstance.destroyPrevious()

// Detects the transition duration to know when to remove stuff from DOM etc.
myInstance.getTransitionDuration()

// Writes an empty state to the history API if supported.
myInstance.writeHistory()

7. Event handlers.

var myInstance = $('#default').slickLightbox();

myInstance.on({
  'show.slickLightbox': function(){ 
    // fired when the lightbox is opened
  },
  'shown.slickLightbox': function(){ 
    // fired when the lightbox is opened, after the transitions took place
  },
  'hide.slickLightbox': function(){ 
    // fired when the lightbox is closed
  },
  'hidden.slickLightbox': function(){ 
    // fired when the lightbox is closed, after the transitions took place
  }
});

---

This awesome jQuery plugin is developed by mreq. For more Advanced Usages, please check the demo page or visit the official website.