Lightbox Plugin For Responsive And Dynamic Images | Chocolat

Install & Download:

# Yarn
$ yarn add chocolat

# NPM
$ npm install chocolat --save

1. Include the Chocolat plugin’s JS and CSS in your doc.

<link rel="stylesheet" href="css/chocolat.css">
<script src="js/chocolat.js"></script>

2. Or import it as an ES module.

import Chocolat from 'chocolat';
@import '~chocolat/dist/css/chocolat.css';

3. Create a brand new lightbox from photos inside the doc.

<a class="chocolat-image" href="1.jpg" title="Caption 1">
  <img src="thumb/1.jpg" />
</a>

<a class="chocolat-image" href="2.jpg" title="Caption 2">
  <img src="thumb/2.jpg" />
</a>

<!-- Responsive Image Delivery Is Supported As Well -->
<a class="chocolat-image" 
  href="320x180.png" 
  title="Caption 3"
  data-srcset="320x180.png 320w, 1280x720.png 1280w, 1920x1080.png 1920w"
  data-sizes="100vw">
  <img src="thumb/3.jpg" /> 
</a>

4. Or load photos from an array as follows:

const images = [
      { 
        src: '1.jpg', 
        title: 'Caption 1' 
      },
      { 
        src: '2.jpg', 
        title: 'Caption 2' 
      },
      { 
        src: '320x180.png', 
        title: 'Caption 3', 
        sizes: '100vw', 
        srcset: '320x180.png 320w, 1280x720.png 1280w' 
      }
]

const myLightbox = Chocolat(images, {
      // options here
});

myLightbox.open();

5. All the customization choices.

Chocolat(document.querySelectorAll('.chocolat-image'), {

  // target container
  // window or jquery object or jquery selector, or element
  container : document.body,

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

  // 'scale-down', 'contain', 'cover' or 'native'
  imageSize: 'scale-down', 

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

  // infinite loop
  loop: false,

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

  // Set index.
  setIndex  : 0,

  // index of the image that you want to start the series.
  firstImageIndex: 0,

  // last image index
  lastImageIndex: false,

  // current image index
  currentImageIndex: undefined,

  // allows to zoom in/out images
  allow: true,

  // allows to close the lightbox on click outside
  closeOnBackgroundClick: true,

  // set title
  setTitle: function() {
    return ''
  },

  // set description
  description: function() {
    return this.images[this.settings.currentImageIndex].title
  },

  // set pagination
  pagination: function() {
    const last = this.settings.lastImageIndex + 1
    const position = this.settings.currentImageIndex + 1

    return position + '/' + last
  },

  // callbacks
  afterInitialize() {},
  afterMarkup() {},
  afterImageLoad() {},
  afterClose() {},

  // function returning the horizontal padding to add around the image when it's zoomed
  zoomedPaddingX: function(canvasWidth, imgWidth) {
    return 0
  },

  // Function returning the vertical padding to add around the image when it's zoomed
  zoomedPaddingY: function(canvasHeight, imgHeight) {
    return 0
  }
  
})

6. API strategies.

// open
myLightbox.open();

// close
myLightbox.close();

// next image
myLightbox.next();

// previous image
myLightbox.prev();

// current image index
myLightbox.current();

// center the current image
myLightbox.position();

// return a HTMLElement composing the lightbox.
myLightbox.getElem('right');

// get option value
myLightbox.get('imageSize');

// update options
myLightbox.set('imageSize', 'contain');

Responsive & Dynamic Image Lightbox Plugin, Chocolat Github, responsive lightbox image gallery jquery, responsive lightbox gallery, free jquery image gallery, lightbox image gallery with thumbnails, bootstrap lightbox gallery demo, tab image gallery jquery

See Demo And Download