Chocolat
Search…
Usage
Instanciating using HTML elements
You can directly bind Chocolat to
<a> links, when clicked the lightbox will open.1
<div>
2
<a class="chocolat-image" href="img/a.jpg" title="image caption a">
3
A <!-- you can display a thumbnail here : <img src="thumb/a.jpg" /> -->
4
</a>
5
<a class="chocolat-image" href="img/b.jpg" title="image caption b">
6
B <!-- you can display a thumbnail here : <img src="thumb/b.jpg" /> -->
7
</a>
8
</div>
Copied!
1
Chocolat(document.querySelectorAll('.chocolat-image'), {
2
// options here
3
})
Copied!
You can also use
srcset and size attributes :1
<div>
2
<a class="chocolat-image"
3
href="demo-images/320x180.png"
4
title="image caption a"
5
data-srcset="demo-images/320x180.png 320w,
6
demo-images/1280x720.png 1280w,
7
demo-images/1920x1080.png 1920w"
8
data-sizes="100vw">
9
A
10
</a>
11
</div>
Copied!
Instanciating using javascript objects
Sometimes you want more control over your images choosing how and when the lightbox will open.
1
const images = [
2
{ src: 'img/a.jpg', title: 'image caption a' },
3
{ src: 'img/b.jpg', title: 'image caption b' },
4
// ...
5
]
6
7
const { api } = Chocolat(images, {
8
// options here
9
})
10
11
// open directly...
12
api.open()
13
14
// ...or when a specific element is clicked.
15
document.querySelector('#open-chocolat-link').addEventListener('click', () => {
16
api.open()
17
})
Copied!
You can also use
srcset and size attributes :1
const images = [
2
{
3
src: 'img/a/320x180.png',
4
title: 'image caption a',
5
sizes: '100vw',
6
srcset: 'img/a/320x180.png 320w, img/a/1280x720.png 1280w'
7
},
8
{
9
src: 'img/b/320x180.png',
10
title: 'image caption b',
11
sizes: '100vw',
12
srcset: 'img/b/320x180.png 320w, img/b/1280x720.png 1280w'
13
},
14
// ...
15
]
16
17
// ...
Copied!
Last modified 2yr ago