Responsive Lightbox jQuery Plugin – Chocolat.js

Responsive Lightbox Plugin: Chocolat.js
File Size:2989.77 KB
Views Total:300
Last Update:January 18, 2018
Publish Date:January 18, 2018
Official Website:Go to website
License:MIT

As we all know that Chocolat.js helps out to display one or several images for the stay on the same page. The main choice is for the user and its group into the main series of a picture or the link and it appears and to make them to appear on the thumbnail. The manin viewer can see them in a full page block or the main block. Chocolat is coming with the API and it is mixed with the multiple CSS classes which is handy for the main user mode or the users that are easier for the newbies. It works well with the major browser. It been checked on IE7+, firefox, chrome, opera and safari.

How to use :

1. Add jquery library with chocolat.js :

<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">

2. Add markup language :

<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>

3.  Initialize the plugin script :

$(document).ready(function(){
    $('.chocolat-parent').Chocolat();
});

Done