Chocolat 轻量级反应敏捷全屏响应的JS图像灯箱插件

简介

Chocolat是一款实用的响应式jQuery LightBox插件。该LightBox插件可以设置两种图像的显示方式：contain和cover。lightbox中的图像可以放大和平移，还可以全屏显示。Chocolat.js 使您能够显示一个或多个图像在同一页面上。给用户展示一组图片缩略图，可以显示全页或块。

插件特点

1）对于 noobs 或者veterans 都可以应用

Chocolat带有API和多个CSS类，这使得它非常方便地用于高级用户，并且非常容易用于noobs。

2）多浏览器支持

Chocolat适用于所有主流浏览器。它已经在IE9+、firefox、chrome、opera、safari上进行了测试。

3）轻量级

Chocolat.js只有23 kb，缩小后达到10 kb。

4）反应敏捷的

Chocolat适用于台式机、平板电脑和移动设备，您也可以定义自己的断点。

使用

1. 引入

安装

yarn add chocolat
# or 
npm install chocolat

html中引入文件

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

<script src="js/chocolat.js"></script>

2. HTML

<div id="example1" data-chocolat-title="Set title">
  <a class="chocolat-image" href="img/a.jpg" title="image caption a">
    A <!-- you can display a thumbnail here : <img src="thumb/a.jpg" /> -->
  </a>
  
  <a class="chocolat-image" href="img/b.jpg" title="image caption b">
    B <!-- you can display a thumbnail here : <img src="thumb/b.jpg" /> -->
  </a>
</div>

3. 用法示例

$(document).ready(function(){
  $('#example1').Chocolat();
});

4. 设置

1）Block  Fullscreen  FullWindow  

container : DOM element

allowFullScreen : bool

Chocolat可以全窗口打开（和许多其他灯箱一样），但也可以在容器（页面中的块元素）中打开。使用最近的浏览器，您还可以全屏浏览图像。

2）Cover  Contain  Native

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

您可以选择裁剪图像或使其完全适合其父图像（无论是任何类型的块）。

3）循环 Loop

loop : bool

选择在到达最后一个映像后从头开始重新启动。

4）键盘导航 Keyboard Navigation

您可以使用键盘导航图像并指定键。

5. 配置项

Options是作为Chocolat的第二个参数传递的javascript对象。

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

示例

Chocolat(document.querySelectorAll('.chocolat-image'), {
    container: document.querySelector('#my-container'),
    loop: true,
    imageSize: 'cover',
    // ...
})

详细配置请前往官方文档查看： 👉  [ 官方文档地址 ]

相关链接

官网地址 ：http://chocolat.insipi.de/

GitHub 地址 ：  https://github.com/nicolas-t/Chocolat

易助科技网效果演示地址：  http://demo.easyzone.net.cn/plugin/Chocolat/demo/index.html