Chocolat是一个jQuery香草JavaScript形象lightbox插件用于创建一个响应，全尺寸的lightbox画廊/滑块在你的网页或在一个特定的容器。

安装和下载：

# Yarn
$ yarn add chocolat

# NPM
$ npm install chocolat --save

基本用法：

1.在文档中包含巧克力插件的JS和CSS。

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

2.或者将其作为ES模块导入。

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

3.根据文档中的图像创建一个新的灯箱。

<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>

Chocolat(document.querySelectorAll('.chocolat-image'), {
  // options here
})

4.或者从阵列中加载图像，如下所示：

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.所有自定义选项。

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
  allowZoom: 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方法。

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

更新日志：

v1.1.0 (2022-07-12)

• 错误修复
• 删除对IE的支持，如果需要IE支持，请使用v1.0.4

1.0.4版（2021-02-27）

• 修正了safari中全屏关闭不起作用的问题

v1.0.3 (2020-07-18)

• 使用Esc关闭灯箱（从全屏模式）抛出TypeError

v1.0.2 (2020-06-12)

• 添加“afterClose”事件

v1.0.1 (2020-04-30)

• 修复链接图像：错误和键盘导航

v1.0.0 (2020-04-08)

• 纯JavaScript重写

版本0.4.21（2018-11-12）

• 可以作为模块导入

版本0.4.15（2016年12月23日）

• 添加了afterInitialize和afterImageLoad挂钩

版本0.4.14（2016年6月15日）

• 钩子而不是自定义函数

版本0.4.13（2016年4月7日）

• 使现代化

版本0.4.12（2016年3月16日）

• 使现代化

版本0.4.11（2016-03-05）

• 修复全屏

2015-09-16

• 版本0.4.10

2015-07-13

• 添加了新皮肤

2015-07-07

• 更新演示，添加数据巧克力标题属性

2015-07-05

• 版本0.4.5

预览截图

响应和动态图像灯箱插件 巧克力