slick-lightbox

A lightbox wrapper for Ken’s amazing slick carousel. Credits go to kenwheeler for doing the hard work.

Usage

Install via bower.

“ower install -S slick-lightbox

Make sure you include CSS for both slick and slick-lightbox. Example HTML:

“ml <!DOCTYPE html> <html> <head> slick lightbox <meta name=“viewport” content=“width=device-width”> <link rel=“stylesheet” type=“text/css” href=“bower_components/slick-carousel/slick/slick.css”> <link rel=“stylesheet” type=“text/css” href=“bower_components/slick-carousel/slick/slick-theme.css”> <link rel=“stylesheet” type=“text/css” href=“styles/slick-lightbox.css”> </head>

</html>

Options

OptionTypeDefaultDescription
backgroundstringrgba(0,0,0,.8)Background for the lightbox. Is used directly as a CSS background statement so that color and/or an image can be used.
closeOnEscapebooleantrueShould the lightbox close upon pressing ESC?
closeOnBackdropClickbooleantrueShould the lightbox close upon clicking on backdrop?
destroyTimeoutinteger500How many ms should we wait before actually removing the lightbox from the DOM? The default is used so that a 0.5s opacity transition can take place.
itemSelectorstringajQuery-like selector for the carousel-to-create items. The items should be anchors with href attribute aiming at the desired lightbox image. If that’s not the case, you should specify the src option.
navigateByKeyboardbooleantrueCan you use keyboard arrows to navigate the carousel?
slickobject{}Slick options to pass to the carousel.
captionvariousfalseShould the images be captioned? If false, no caption is created. 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 data-attribute to be fetched (my-caption will get the value of data-my-caption attribute).
srcvariousfalseHow 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).
captionPositionvarious'dynamic'Where should the caption be placed? When set to ‘dynamic’, the caption is displayed right under the image. When ‘bottom’, the caption is on the bottom of the screen independent to the image size.
imagesvariousfalseWhen passed an array, slick lightbox doesn’t scan the elements for image URLs and uses array’s values instead.

Events

Events are triggered on the source element. Example:

“vascript $(document).ready(function(){ $(‘ul’).slickLightbox().on({ ‘show.slickLightbox’: function(){ console.log(‘A show.slickLightbox event triggered.’); },1 ‘shown.slickLightbox’: function(){ console.log(‘A shown.slickLightbox event triggered.’); }, ‘hide.slickLightbox’: function(){ console.log(‘A hide.slickLightbox event triggered.’); }, ‘hidden.slickLightbox’: function(){ console.log(‘A hidden.slickLightbox event triggered.’); } }); });

EventDescription
show.slickLightboxTriggered when the lightbox is opened.
shown.slickLightboxTriggered when the lightbox is opened, after the transitions took place.
hide.slickLightboxTriggered when the lightbox is closed.
hidden.slickLightboxTriggered when the lightbox is closed, after the transitions took place.