Chocolat.js is a small, but powerful jQuery lightbox plugin. Responsive friendly.
Responsive and lightweight jQuery lightbox plugin
Chocolat.js enables us to display one or many images at the same page. Thumbnails, navigation and many options available.
It’s easy to use – the plugin comes with an API and multiples CSS classes which make it very handy to use for beginner and advanced users.
It’s crossbrowser – chocolat.js works well with all major browsers.
Lightweight – Chocolat.js is only 23 kb and reaches 10 kb once minified.
Responsive – this jQuery lightbox plugin works on desktop, tablet & mobile.
Chocolat can be opened in full-window mode, but it can also be opened in a container. With recent browser we can also navigate through the images full screen.
Also, we can navigate through the images using your keyboard and assign keys.
Include the plugin and jQuery framework (1.x or 2.x).
Then create the markup:
<div id="example1" data-chocolat-title="My title">
<a class="chocolat-image" href="img/a.jpg" title="caption 1">
A <!-- we can display a thumbnail: <img src="sml/a.jpg" /> -->
<a class="chocolat-image" href="img/b.jpg" title="caption 2">
B <!-- we can display a thumbnail: <img src="sml/b.jpg" /> -->