Responsive & Dynamic jQuery Image Lightbox Plugin - Chocolat

Responsive & Dynamic jQuery Image Lightbox Plugin - Chocolat
File Size: 2.92 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Chocolat is a jQuery image lightbox plugin used to create a responsive, full-sized lightbox gallery/slider on your webpage or within a specific container. Great for showcasing your grouped images in a pleasant way.

Basic usage:

1. Include the jQuery Chocolat plugin's JS and CSS in your document.

<link rel="stylesheet" href="css/chocolat.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/jquery.chocolat.js"></script>

2. Wrap the image links into a container as follow.

<div id="example">
  <a class="chocolat-image" href="1.jpg" title="Image Caption">
    ...
  </a>
  <a class="chocolat-image" href="2.jpg" title="Image Caption">
    ...
  </a>
  <a class="chocolat-image" href="3.jpg" title="Image Caption">
    ...
  </a>
</div>

3. Initialize the plugin. It will display a fullscreen gallery lightbox that allows you to navigate through the images infinitely.

$('#example').Chocolat({
  loop           : true,
  fullWindow     : 'cover',
  overlayOpacity : 0.9
});

4. All the customization options.

$('#example').Chocolat({

  // target container
  // window or jquery object or jquery selector, or element
  container         : window,

  // Selector to find images in the parent element
  imageSelector     : '.chocolat-image',

  // Add a custom css class to the parent of the lightbox
  className         : '',

  // 'default', 'contain', 'cover' or 'native'
  imageSize         : 'default', 

  // HTML5 feature. Hides the browser.
  fullScreen        : false,

  initialZoomState  : null,

  // infinite loop
  loop              : false,

  // Sets whether we can switch from one image to another
  linkImages        : true,

  // Animations duration
  duration          : 300,

  // title of the set.
  setTitle          : '',

  // Text between the number of the image and the number of images in the set
  separator2        : '/',

  // Set index.
  setIndex          : 0,

  // Index of the image that you want to start the series.
  firstImage        : 0,

  // Index of the image that you want to end the series.
  lastImage         : false,

  // Current image
  currentImage      : false,

  initialized       : false,
  timer             : false,
  timerDebounce     : false,

  // Array of object representing the set images
  images            : [],

  // Disable or enable the zooming feature
  enableZoom        : true,
  
  imageSource       : "href",

  // Callbacks
  afterInitialize   : function () {},
  afterMarkup       : function () {},
  afterImageLoad  : function () {},
  
});

Change logs:

v0.4.15 (2016-12-23)

  • added afterInitialize and afterImageLoad hooks

v0.4.14 (2016-06-15)

  • hook instead of custom functions

v0.4.13 (2016-04-07)

v0.4.12 (2016-03-16)

  • update

v0.4.11 (2016-03-05)

  • Fix fullscreen

2015-09-16

  • v0.4.10

2015-07-13

  • added new skin

2015-07-07

  • updated demo, added data-chocolat-title attr

2015-07-05

  • v0.4.5

This awesome jQuery plugin is developed by nicolas-t. For more Advanced Usages, please check the demo page or visit the official website.