# Usage

## Instanciating using HTML elements

You can directly bind Chocolat to `<a>` links, when clicked the lightbox will open.

```markup
<div>
    <a class="chocolat-image" href="img/a.jpg" title="image caption a">
        A <!-- you can display a thumbnail here : <img src="thumb/a.jpg" /> -->
    </a>
    <a class="chocolat-image" href="img/b.jpg" title="image caption b">
        B <!-- you can display a thumbnail here : <img src="thumb/b.jpg" /> -->
    </a>
</div>
```

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

You can also use `srcset` and `size`  attributes :

```markup
<div>
    <a class="chocolat-image" 
        href="demo-images/320x180.png" 
        title="image caption a"
        data-srcset="demo-images/320x180.png 320w,
            demo-images/1280x720.png 1280w,
            demo-images/1920x1080.png 1920w"
        data-sizes="100vw">
        A 
    </a>
</div>
```

## Instanciating using javascript objects

Sometimes you want more control over your images choosing how and when the lightbox will open.

```javascript
const images = [
    { src: 'img/a.jpg', title: 'image caption a' },
    { src: 'img/b.jpg', title: 'image caption b' },
    // ...
]

const { api } = Chocolat(images, {
    // options here
})

// open directly...
api.open()

// ...or when a specific element is clicked.
document.querySelector('#open-chocolat-link').addEventListener('click', () => {
    api.open()
})
```

You can also use `srcset` and `size`  attributes :

```javascript
const images = [
    { 
        src: 'img/a/320x180.png', 
        title: 'image caption a', 
        sizes: '100vw', 
        srcset: 'img/a/320x180.png 320w, img/a/1280x720.png 1280w' 
    },
    { 
        src: 'img/b/320x180.png', 
        title: 'image caption b', 
        sizes: '100vw', 
        srcset: 'img/b/320x180.png 320w, img/b/1280x720.png 1280w' 
    },
    // ...
]

// ...
```

You can find a more complete example in the `./demo/` folder: [here](https://github.com/nicolas-t/Chocolat/blob/ab712cae706c21eebd2515600db514752100e2e8/demo/index.html#L142-L235)