Chocolat
Search…
Chocolat
1.0.2
Installation
Usage
Options
Api
CSS classes
Image sizes
Upgrading from v0.4
Contributing
Powered By
GitBook
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
()
Previous
Options
Next
CSS classes
Last modified
2yr ago
Copy link
Outline
Accessing the API
Api methods
open([index])
close()
prev()
next()
current()
position()
destroy()
getElem(elementName)
get(optionName)
set(optionName, optionValue)