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');

lightbox image gallery with thumbnails, bs lightbox gallery demo, tab image gallery jquery

See Demo And Download