Api - Chocolat

Chocolat

Search…

Chocolat

1.0.2

Api

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

Options

CSS classes

Last modified 1yr ago

Copy link

Contents

set(optionName, optionValue)