Options is a javascript object passed as the second arguments of Chocolat.
Chocolat(document.querySelectorAll('.chocolat-image'), {// options here})
For example :
Chocolat(document.querySelectorAll('.chocolat-image'), {container: document.querySelector('#my-container'),loop: true,imageSize: 'cover',// ...})
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
:
{container: document.querySelector('#my-container')}
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.
{imageSize: 'cover'}
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
).
{linkImages: false}
default : undefined
type : String
Adds a custom css classes to the parent of the lightbox.
{className: 'my-first-custom-class my-second-custom-class'}
default : false
type : Boolean
When true: last image + 1 leads to first image. first image - 1 leads to last image.
{loop: true}
default : true
type : Boolean
Closes Chocolat when the background is clicked.
{closeOnBackgroundClick: false}
default : 0
type : Number
Index of the image that you want to start the series.
{firstImageIndex: 2}
default : images.length - 1
type : Number
Index of the image that you want to start the series.
{lastImageIndex: 2}
default : undefined
type : Function
Function returning the title of the image set.
You can access the Chocolat
instance inside the function unsing this
.
{setTitle: function () { return 'Title of the set' }}
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
.
{description: function () {const currentImage = this.settings.images[this.settings.currentImageIndex]return currentImage.title}}
default : function returning position + '/' + last
type : Function
Function returning the pagination informations.
You can acces s the Chocolat
instance inside the function unsing this
.
{pagination: function () {const last = this.settings.lastImageIndex + 1const position = this.settings.currentImageIndex + 1return position + '/' + last}}
default : false
type : Boolean
Opens Chocolat fullscreen (hides the browser window).
{fullScreen: true}
default : true
type : Boolean
Disable or enable the zooming feature.
{allowZoom: false}
default : empty function
type : Function
Function (hook) called just after chocolat gets initialized.
{afterInitialize: function () {// your logic here}}
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.
{afterMarkup: function () {this.elems.description.appendTo(this.elems.top)}}
default : empty function
type : Function
Function (hook) called just after an image is loaded.
{afterImageLoad: function () {// your logic here}}
default : empty function
type : Function
Function (hook) called just after Chocolat is closed.
{afterClose: function () {// your logic here}}
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
{zoomedPaddingX: function (canvasWidth, imgWidth) {return canvasWidth / 2}}
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
{zoomedPadding: function (canvasHeight, imgHeight) {return canvasHeight / 2}}
​