Api

Accessing the 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

Api methods

open([index])

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

close()

Closes the lightbox. Returns a Promise.

api.close() 

// or

api.close().then(() => {
    console.log('Animations have finished and lightbox is closed.')
})

prev()

Changes image backward. Returns a Promise.

api.prev() 

// or

api.prev().then(() => {
    console.log('Previous image is loaded and animations have finished.')
})

next()

Changes image forward. Returns a Promise.

api.next() 

// or

api.next().then(() => {
    console.log('Next image is loaded and animations have finished.')
})

current()

Returns the index of the current image.

api.current() // returns 1, for example

position()

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

destroy()

Destroys the current instance. Removes elements, unbinds events, clears data.

api.destroy()

getElem(elementName)

Returns a HTMLElement composing the lightbox.

// Get the `next` arrow element
api.getElem('right')

get(optionName)

Classic getter

api.get('imageSize') // 'default'

set(optionName, optionValue)

Classic setter

// Changes imageSize to 'contain'
api.set('imageSize', 'contain')
// Reposition the image according to the new value `contain`
api.position()