Usage
You can directly bind Chocolat to
<a> links, when clicked the lightbox will open.<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>
Chocolat(document.querySelectorAll('.chocolat-image'), {
// options here
})
You can also use
srcset and size attributes :<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>
Sometimes you want more control over your images choosing how and when the lightbox will open.
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 :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'
},
// ...
]
// ...
Last modified 2yr ago