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');
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
Official Website(nicolas-t): Click Here
This superior jQuery/javascript plugin is developed by nicolas-t. For extra Advanced Usages, please go to the official website.
Be First to Comment