You can control Chocolat using its API. Once you instanciated Chocolat you can access the api using :
const instance = Chocolat(document.querySelectorAll('.chocolat-image'), {})const api = instance.api​// or​const { api } = Chocolat(document.querySelectorAll('.chocolat-image'), {})​// or​const api = Chocolat(document.querySelectorAll('.chocolat-image'), {}).api
Opens the lightbox on the image whose index is i
.
Opens on the first image if index
undefined.
Returns a Promise
.
// Opens the first imageapi.open()​// Opens the 3rd imageapi.open(2).then(() => {console.log('Third image is loaded and animations have finished.')})
Closes the lightbox.
Returns a Promise
.
api.close()​// or​api.close().then(() => {console.log('Animations have finished and lightbox is closed.')})
Changes image backward.
Returns a Promise
.
api.prev()​// or​api.prev().then(() => {console.log('Previous image is loaded and animations have finished.')})
Changes image forward.
Returns a Promise
.
api.next()​// or​api.next().then(() => {console.log('Next image is loaded and animations have finished.')})
Returns the index of the current image.
api.current() // returns 1, for example
Centers the image in its parent.
Returns a Promise
.
// Centers the current imageapi.position().then(() => {console.log('Image is centered and animations have finished.')})
Destroys the current instance. Removes elements, unbinds events, clears data.
api.destroy()
Returns a HTMLElement
composing the lightbox.
// Get the `next` arrow elementapi.getElem('right')
Classic getter
api.get('imageSize') // 'default'
Classic setter
// Changes imageSize to 'contain'api.set('imageSize', 'contain')// Reposition the image according to the new value `contain`api.position()