Options
How to use options
Options is a javascript object passed as the second arguments of Chocolat.
For example :
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 #my-container
:
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 container it's resized to fit.If the image is smaller than the window it's not streched, only 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 space are displayed.'native'
: the image is never streched nor shrinked, always displayed at native dimensions.
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
).
className
default : undefined
type : String
Add a custom css class to the parent of the lightbox.
loop
default : false
type : Boolean
When true: last image + 1 leads to first image. first image - 1 leads to last image.
closeOnBackgroundClick
default : true
type : Boolean
Closes Chocolat when the background is clicked.
firstImageIndex
default : 0
type : Number
Index of the image that you want to start the series.
lastImageIndex
default : images.length - 1
type : Number
Index of the image that you want to start the series.
setTitle
default : undefined
type : Function
Function returning the title of the image set.
You can acces s the Chocolat
instance inside the function unsing this
.
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
.
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
.
fullScreen
default : false
type : Boolean
Opens Chocolat fullscreen (hides the browser window).
allowZoom
default : true
type : Boolean
Disable or enable the zooming feature.
afterInitialize
default : undefined
type : Function
Function (hook) called just after chocolat gets initialized.
afterMarkup
default : undefined
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.
afterImageLoad
default : undefined
type : Function
Function (hook) called just after an image is loaded.
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
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
Last updated