Chocolat.js – a free jQuery lightbox plugin – responsive and powerful

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.js - jQuery lightbox plugin with options
Chocolat.js – jQuery lightbox plugin with options

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.

Usage

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>
  <a class="chocolat-image" href="img/b.jpg" title="caption 2">
    B <!-- we can display a thumbnail: <img src="sml/b.jpg" /> -->
  </a>
</div>

Start the plugin:

$(document).ready(function(){
    $('#example1').Chocolat();
});

That’s it!

License

Commercial license – if you want to develop commercial sites, themes, projects, and applications.

Open source license – if you are creating an open source application under a license compatible with the GNU GPL license v3, you may use this project under the terms of the GPLv3.

Project homepage:

http://chocolat.insipi.de

Docs and download @ GitHub:

https://github.com/nicolas-t/Chocolat

Bonus – there is also a version integrated with AngularJS:

https://github.com/beuted/ng-chocolat

You may also like:

Something sweet? Try Choco Slider – flexible jQuery slideshow plugin!

FancyBox v2 jQuery plugin

jQuery image slider with Lightbox – ion.imageSlider

Enjoy!

Share:Share on Facebook0Share on Google+1Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1