# Options

## How to use options &#x20;

Options is a javascript object passed as the second arguments of Chocolat.

```javascript
Chocolat(document.querySelectorAll('.chocolat-image'), {
    // options here
})
```

For example :&#x20;

```javascript
Chocolat(document.querySelectorAll('.chocolat-image'), {
    container: document.querySelector('#my-container'),
    loop: true,
    imageSize: 'cover',
    // ...
})
```

## Options list&#x20;

### container

_default :_ `window`  \
&#xNAN;_&#x74;ype :_ `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`:

```javascript
{ 
    container: document.querySelector('#my-container')
}
```

### imageSize

_default :_ `'scale-down'`  \
&#xNAN;_&#x74;ype : `String`_ \
_possible values_ : `'scale-down'`, `'contain'`, `'native'`, or `'cover'`

For a more detailed explanations see the **Images sizes** page :

{% content-ref url="image-sizes" %}
[image-sizes](image-sizes)
{% endcontent-ref %}

*   `'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.&#x20;
* `'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.&#x20;
* `'cover'` : the image cover the window, no white spaces are displayed.
* `'native'` : the image is never streched nor shrinked, always displayed at native dimensions.\


```javascript
{ 
    imageSize: 'cover'
}
```

### linkImages

_default :_ `true`  \
&#xNAN;_&#x74;ype :_ `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`).&#x20;

```javascript
{ 
    linkImages: false
}
```

### className

_default :_ `undefined`  \
&#xNAN;_&#x74;ype : `String`_

Adds a custom css classes to the parent of the lightbox.

```javascript
{ 
    className: 'my-first-custom-class my-second-custom-class'
}
```

### loop

_default :_ `false`  \
&#xNAN;_&#x74;ype : `Boolean`_

When true:\
last image + 1 leads to first image.\
first image - 1 leads to last image.

```javascript
{ 
    loop: true
}
```

### closeOnBackgroundClick

_default :_ `true`  \
&#xNAN;_&#x74;ype : `Boolean`_

Closes Chocolat when the background is clicked.

```javascript
{ 
    closeOnBackgroundClick: false
}
```

### firstImageIndex

_default :_ `0`  \
&#xNAN;_&#x74;ype : `Number`_

Index of the image that you want to start the series.

```javascript
{ 
    firstImageIndex: 2
}
```

### lastImageIndex

_default :_ `images.length - 1`  \
&#xNAN;_&#x74;ype : `Number`_

Index of the image that you want to start the series.

```javascript
{ 
    lastImageIndex: 2
}
```

### setTitle

_default :_ `undefined`  \
&#xNAN;_&#x74;ype :_ `Function`

Function returning the title of the image set.\
You can access the `Chocolat` instance inside the function unsing `this`.

```javascript
{ 
    setTitle: function () { return 'Title of the set' }
}
```

### description

_default :_ `title` html attribute of the image \
&#xNAN;_&#x74;ype :_ `Function`

Function returning the description of the image.\
You can acces s the `Chocolat` instance inside the function unsing `this`.

```javascript
{ 
    description: function () { 
        const currentImage = this.images[this.settings.currentImageIndex]
        return currentImage.title
    }
}
```

### pagination

_default :_ function returning `position + '/' + last`  \
&#xNAN;_&#x74;ype : `Function`_

Function returning the pagination informations. \
You can acces s the `Chocolat` instance inside the function unsing `this`.

```javascript
{ 
    pagination: function () {
        const last = this.settings.lastImageIndex + 1
        const position = this.settings.currentImageIndex + 1
        return position + '/' + last
    }
}
```

### fullScreen

_default :_ `false`  \
&#xNAN;_&#x74;ype : `Boolean`_

Opens Chocolat fullscreen (hides the browser window).

```javascript
{ 
    fullScreen: true
}
```

### allowZoom

_default : `true`_\
&#xNAN;_&#x74;ype : `Boolean`_

Disable or enable the zooming feature.

```javascript
{ 
    allowZoom: false
}
```

### afterInitialize

_default : `empty function`_\
&#xNAN;_&#x74;ype : `Function`_

Function (hook) called just after chocolat gets initialized.

```javascript
{ 
    afterInitialize: function () {
        // your logic here
    }
}
```

### afterMarkup

_default : `empty function`_\
&#xNAN;_&#x74;ype : `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.

```javascript
{ 
    afterMarkup: function () {
       this.elems.description.appendTo(this.elems.top)
    }
}
```

### afterImageLoad

_default : `empty function`_\
&#xNAN;_&#x74;ype : `Function`_

Function (hook) called just after an image is loaded.

```javascript
{ 
    afterImageLoad: function () {
       // your logic here
    }
}
```

### afterClose

_default : `empty function`_\
&#xNAN;_&#x74;ype : `Function`_

Function (hook) called just after Chocolat is closed.

```javascript
{ 
    afterClose: function () {
       // your logic here
    }
}
```

### zoomedPaddingX

_default :_ function returning `0`\
&#xNAN;_&#x74;ype : `Function`_

Function returning the horizontal padding to add around the image when it's zoomed.\
&#x20;It takes 2 arguments `canvasWidth` and `imgWidth`

```javascript
{ 
   zoomedPaddingX: function (canvasWidth, imgWidth) {
       return canvasWidth / 2
   }
}
```

### zoomedPaddingY

_default :_ function returning `0`\
&#xNAN;_&#x74;ype : `Function`_

Function returning the vertical padding to add around the image when it's zoomed.\
&#x20;It takes 2 arguments `canvasHeight` and `imgHeight`

```javascript
{ 
   zoomedPadding: function (canvasHeight, imgHeight) {
       return canvasHeight / 2
   }
}
```

