Api
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 image
api.open()
// Opens the 3rd image
api.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 image
api.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 element
api.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()
Last modified 3yr ago