Options

Chocolat
Search…
Chocolat
1.0.2
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 :
Image sizes
'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!
​
Usage
Api
Last modified 1mo ago