HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 应用推荐 HTML5应用 查看内容

Chocolat-jQuery响应式LightBox插件

2016-4-8 10:31| 发布者: admin| 查看: 5536| 评论: 0|来自: jQuery之家

摘要: Chocolat是一款实用的响应式jQuery LightBox插件。该LightBox插件可以设置两种图像的显示方式:contain和cover。lightbox中的图像可以放大和平移,还可以全屏显示。 ...

  简要教程

  Chocolat是一款实用的响应式jQuery LightBox插件。该LightBox插件可以设置两种图像的显示方式:contain和cover。lightbox中的图像可以放大和平移,还可以全屏显示。

 

查看演示      下载插件

 

  安装

  可以通过bower方法来安装该LightBox插件。

$ bower install chocolat        


  使用方法

  使用该lightbox插件需要在页面中引入chocolat.css、jquery和jquery.chocolat.js文件。

<link rel="stylesheet" href="css/chocolat.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.chocolat.js"></script>   


  HTML结构

  该Lightbox的基本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>   


  初始化插件

  在页面DOM元素加载完毕之后,可以通过Chocolat()方法来初始化该lightbox插件。

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


  配置参数

参数 默认值 描述
container window 设置默认是在整个页面还是一个容器中打开lightbox。可以是window, 选择器, jQuery元素或一个节点。
imageSelector '.chocolat-image' 在父元素中图片的选择器。
linkImages true 设置是否可以切换图片。
setTitle '' 设置标题。也可以通过data-chocolat-title属性来设置。
className '' 为lightbox父元素设置一个CSS类。
imageSize 'default' 可以是:'default', 'contain', 'native', 'cover'
'default':表示如果图片尺寸大于window则调整图片尺寸适合窗口尺寸,小则不改变。
'contain':表示如果图片尺寸大于window则调整图片尺寸适合窗口尺寸,如果图片尺寸小则改变图片比例来填充窗口。'native':图片从不改变其尺寸。
'cover':图片覆盖窗口,不留任何白边。
fullScreen false 是否允许进入全屏模式。
loop false 是否循环播放。
duration 300 动画持续时间。
firstImage 0 第一张图片。
lastImage 0 最后一张图片。
separator2 '/' 图片数量标识之间的分隔符号。
images [] 图片数组。
enableZoom true 是否允许缩放。
setIndex 0 设置index

 

  API方法

  像下面这样调用chocolat插件:

$(document).ready(function(){
    var instance = $('#example1').Chocolat().data('chocolat');
});      


  然后通过链式结构调用API:

instance.api().open();   


  可用的API方法有:

  •   open:参数可选。参数:i。在lightbox中打开index为i的图片。默认打开第一张图片(i=0)。返回$.Deferred对象。
  •   close:关闭lightbox。返回$.Deferred对象。
  •   prev:跳转到前一张图片。返回$.Deferred对象。
  •   next:跳转到下一张图片。返回$.Deferred对象。
  •   goto(i):跳转到第i张图片。返回$.Deferred对象。
  •   place:使图片位于父元素居中。返回$.Deferred对象。
  •   destroy:销毁当前插件实例。
  •   set(property, value):设置class。
  •   get(property, value):获取class。
  •   getElem(name):返回构成lightbox的某个jquery对象。
  •   current:返回当前图片的index。

 

  CSS类

  •   .chocolat-open:lightbox打开时容器的class。
  •   .chocolat-in-container:当不是以window方式打开时容器的class类。
  •   .chocolat-cover:当imageSize设置为'cover'时容器的class类。
  •   .chocolat-zoomable:当lightbox可以进行缩放时容器的class类。
  •   .chocolat-zoomed:当lightbox可以正在进行缩放时容器的class类。

  Chocolat插件的github地址为:https://github.com/nicolas-t/Chocolat

 

  来源:jQuery之家

更多

鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-1-20 19:56

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部