Chocolat
Search…
Options

How to use options

Options is a javascript object passed as the second arguments of Chocolat.
1
Chocolat(document.querySelectorAll('.chocolat-image'), {
2
// options here
3
})
Copied!
For example :
1
Chocolat(document.querySelectorAll('.chocolat-image'), {
2
container: document.querySelector('#my-container'),
3
loop: true,
4
imageSize: 'cover',
5
// ...
6
})
Copied!

Options list

container

default : window type : HTMLElement
Sets whether lightbox will open and fill the whole page (default), or whether it should open in a particular block of the page. For example if we want to display the lightbox in the block #my-container:
1
{
2
container: document.querySelector('#my-container')
3
}
Copied!

imageSize

default : 'scale-down' type : String possible values : 'scale-down', 'contain', 'native', or 'cover'
For a more detailed explanations see the Images sizes page :
  • 'scale-down' : if the image is bigger than the window it's resized to fit.
    If the image is smaller than the window it's not streched, just displayed at native dimensions.
  • 'contain' : if the image is bigger than the window it's resized to fit. If the image is smaller than the window it's streched, to fit the window.
  • 'cover' : the image cover the window, no white spaces are displayed.
  • 'native' : the image is never streched nor shrinked, always displayed at native dimensions.
1
{
2
imageSize: 'cover'
3
}
Copied!

linkImages

default : true type : Boolean
Sets whether we can switch from one image to another, without closing the viewer (true), or if the images can only be openned one by one (false).
1
{
2
linkImages: false
3
}
Copied!

className

default : undefined type : String
Adds a custom css classes to the parent of the lightbox.
1
{
2
className: 'my-first-custom-class my-second-custom-class'
3
}
Copied!

loop

default : false type : Boolean
When true: last image + 1 leads to first image. first image - 1 leads to last image.
1
{
2
loop: true
3
}
Copied!

closeOnBackgroundClick

default : true type : Boolean
Closes Chocolat when the background is clicked.
1
{
2
closeOnBackgroundClick: false
3
}
Copied!

firstImageIndex

default : 0 type : Number
Index of the image that you want to start the series.
1
{
2
firstImageIndex: 2
3
}
Copied!

lastImageIndex

default : images.length - 1 type : Number
Index of the image that you want to start the series.
1
{
2
lastImageIndex: 2
3
}
Copied!

setTitle

default : undefined type : Function
Function returning the title of the image set. You can access the Chocolat instance inside the function unsing this.
1
{
2
setTitle: function () { return 'Title of the set' }
3
}
Copied!

description

default : title html attribute of the image type : Function
Function returning the description of the image. You can acces s the Chocolat instance inside the function unsing this.
1
{
2
description: function () {
3
const currentImage = this.images[this.settings.currentImageIndex]
4
return currentImage.title
5
}
6
}
Copied!

pagination

default : function returning position + '/' + last type : Function
Function returning the pagination informations. You can acces s the Chocolat instance inside the function unsing this.
1
{
2
pagination: function () {
3
const last = this.settings.lastImageIndex + 1
4
const position = this.settings.currentImageIndex + 1
5
return position + '/' + last
6
}
7
}
Copied!

fullScreen

default : false type : Boolean
Opens Chocolat fullscreen (hides the browser window).
1
{
2
fullScreen: true
3
}
Copied!

allowZoom

default : true type : Boolean
Disable or enable the zooming feature.
1
{
2
allowZoom: false
3
}
Copied!

afterInitialize

default : empty function type : Function
Function (hook) called just after chocolat gets initialized.
1
{
2
afterInitialize: function () {
3
// your logic here
4
}
5
}
Copied!

afterMarkup

default : empty function type : Function
Function (hook) called just after markup is created. You can use it to alter the default markup: to move the caption at the top of the image for example.
1
{
2
afterMarkup: function () {
3
this.elems.description.appendTo(this.elems.top)
4
}
5
}
Copied!

afterImageLoad

default : empty function type : Function
Function (hook) called just after an image is loaded.
1
{
2
afterImageLoad: function () {
3
// your logic here
4
}
5
}
Copied!

afterClose

default : empty function type : Function
Function (hook) called just after Chocolat is closed.
1
{
2
afterClose: function () {
3
// your logic here
4
}
5
}
Copied!

zoomedPaddingX

default : function returning 0 type : Function
Function returning the horizontal padding to add around the image when it's zoomed. It takes 2 arguments canvasWidth and imgWidth
1
{
2
zoomedPaddingX: function (canvasWidth, imgWidth) {
3
return canvasWidth / 2
4
}
5
}
Copied!

zoomedPaddingY

default : function returning 0 type : Function
Function returning the vertical padding to add around the image when it's zoomed. It takes 2 arguments canvasHeight and imgHeight
1
{
2
zoomedPadding: function (canvasHeight, imgHeight) {
3
return canvasHeight / 2
4
}
5
}
Copied!
Last modified 3mo ago