lightbox

A simple lightbox script we use on our projects

Installation

$3

npm i whitecube-lightbox

$3

yarn add whitecube-lightbox

and then in your code simply import it:

``js
import Lightbox from 'whitecube-lightbox';
`

Usage

Simply create an instance of the class and give it a config object, for example :

`js
let lightbox = new Lightbox({
elements: '.lightbox__item',
hiddenClass: 'screen-readers-only',
close: 'Close the lightbox',
prev: 'See the previous image',
next: 'See the next image'
});
`

Here's what each key corresponds to:
- elements: a query selector for your initial clickable items you want to show in the lightbox
- hiddenClass: a class name that will be applied on elements around text that you potentially want to hide (in the prev/next buttons for example)
- close: The text to place inside the close button
- prev: The text to place inside the previous button
- next: The text to place inside the next button

Please note: the elements retrieved by your elements selector must have a data-image attribute with the URL of the image to display in the lightbox.


Here's a super quick code example:

`html


`

`js
let lightbox = new Lightbox({
elements: '.gallery__item',
hiddenClass: 'screen-readers-only',
close: 'Close the lightbox',
prev: 'See the previous image',
next: 'See the next image'
});
`

Generated markup (placed before the closing body tag):

`html



``

You are then free to style it as needed.