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'},// ...]// ...
You can find a more complete example in the ./demo/
folder: here