Chocolat.js is a great new plugin that will give you a powerful lightbox to display one or gallery of images (by staying on the same page).
Users have the choice to group together series of pictures as a link or just let them be displayed as thumbnails. Images also may appear full-page or in a block.
Chocolat.js comes with an API and many CSS classes which makes it a perfect plugin for both beginner and advanced users. The other great thing about this plugin is the fact that it works perfectly well with all major browsers as it has been tested on IE7+, Firefox, Chrome, Opera and Safari.
This lightbox plugin is also a great choice for any responsive website as it looks awesome on mobile, tablet desktop. There is also an option to define your own breakpoints. Chocolat.js is only 23 KB and the minified version is 10 KB.
Have a look below to see how you can add Chocolat.js to your website.
Step #1
First of all, three files need to be added between the head tags:
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.chocolat.js"></script> <link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8">
Step #2
The second thing that has to be done is to create links to your full-sized images. You can also put image thumbnails within these links. If you want to add image captions you should use the title attribute as data-chocolat-title attribute of the parent element corresponds to the title of the set.
All links must have a css class – chocolat-image.
Put this piece of code between the body tags. This is an example with thumbnails added between the links.
<div class="chocolat-parent" data-chocolat-title="set title"> <a class="chocolat-image" href="series/1.jpg" title="caption image 1"> <img width="100" src="series/mini/1.jpg" /> </a> <a class="chocolat-image" href="series/2.jpg" title="caption image 2"><img width="100" src="series/mini/2.jpg" /> </a> <a class="chocolat-image" href="series/3.jpg" title="caption image 3"><img width="100" src="series/mini/3.jpg"/></a> </div>
Step #3
Calling the script. To enable the navigation you need to add some code between script tags at the bottom of your document.
<script>
$(document).ready(function(){
$('.chocolat-parent').Chocolat();
});
</script>
That’s it. Following these steps will give you a simple lightweight responsive lightbox.