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>
Sometimes you want more control over your images choosing how and when the lightbox will open.
constimages= [ { 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()})