建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

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

来源:易助科技网浏览量:21收藏

简介


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


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