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

Responsive Gallery Lightbox With jQuery And Slick.js - slick-lightbox
File Size: 546 KB
Views Total: 12515
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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>
  <a href="2.jpg" target="_blank">
    <img src="thumb-2.jpg" alt=""></a>
  <a href="3.jpg" target="_blank">
    <img src="thumb-3.jpg" alt=""></a>

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


5. All default customization options.

  // 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.

// Creates a slick-friendly modal.

// 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.

// Opens the lightbox.

// Closes the lightbox and destroys it, maintaining the original element bindings.

// Binds global events.

// Moves the slick prev or next.

// Detects usage of IE8 and lower.

// 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.

// Unbinds global events.

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

// Destroys lightboxes currently in DOM.

// Detects the transition duration to know when to remove stuff from DOM etc.

// Writes an empty state to the history API if supported.

7. Event handlers.

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

  '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.