Chocolat is a jQuery Vanilla JavaScript Lightbox plugin used to create a fully responsive full-size gallery/slider on your webpage or within a specific container. Great for displaying your collages in a fun way.
How to make use of it:
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
Official Website(nicolas-t): Click Here
This superior jQuery/javascript plugin is developed by nicolas-t. For extra Advanced Usage, please go to the official website.