人靠衣装,机靠壳装

支持移动设备的响应式lightbox插件

2017-05-25 14:15 发布

00
admin
湖南省 长沙市
  • 粉丝4

  • 关注1

  • 动态2

支持移动设备的响应式lightbox插件.jpg



baguetteBox.js是一款支持移动设备的响应式lightbox插件。纯javascript编写,支持响应式图片和CSS3动画过渡效果,支持移动手机,压缩后的版本仅2.7K。


baguetteBox.js插件的特点还有:

  • 同一个页面支持多个lightbox实例,互不影响。

  • 支持移动触摸设备。

  • 支持全屏模式。

  • 支持显示图片标题。

  • 支持响应式图片。

  • 支持CSS3过渡动画。

  • 按钮使用SVG,不需要额外的图片。

  • 压缩后的版本仅2.7K。

配置参数

你可以在初始化时,在第二个参数中以对象的方式传入配置参数:

baguetteBox.run('.gallery', {
    // 配置参数
});


参数类型默认值描述
captionsBoolean | function(element)true是否显示图片标题。如果传入的是一个函数,必须返回一个字符串。
buttonsBoolean | 'auto''auto'是否显示导航按钮。设置为auto表示在移动设备或仅有一张图片时隐藏导航按钮。
fullScreenBooleanfalse是否允许全屏模式。
noScrollbarsBooleanfalse是否在画廊显示时隐藏滚动条。
titleTagBooleanfalse是否使用图片上的title属性作为图片标题。
asyncBooleanfalse是否异步加载文件。
preloadNumber2预加载多少个文件。
animation'slideIn' | 'fadeIn' | false'slideIn'过渡动画的类型。
afterShowfunctionnull显示遮罩层之后的回调函数。
afterHidefunctionnull隐藏遮罩层之后的回调函数。
onChangefunction(currentIndex, imagesCount)null图片改变时的回调函数。
overlayBackgroundColorString'rgba(0,0,0,0.8)'lightbox遮罩层的背景颜色。
filterRegExp`/.+.(gifjpe?g

 方法API

baguetteBox.js插件有4个可用的方法:

  • run:初始化baguetteBox.js插件。

  • showNext:切换到下一张图片。

  • showPrevious:切换到前一张图片。

  • destroy:销毁插件和绑定的事件。

响应式图片

要使用响应式图片特性,只需要在a标签上设置data-at-{width}属性。其中{width}指的是最大屏幕宽度。例如:

<a href="img/2-1.jpg"
  data-at-450="img/thumbs/2-1.jpg"
  data-at-800="img/small/2-1.jpg"
  data-at-1366="img/medium/2-1.jpg"
  data-at-1920="img/big/2-1.jpg">
    <img src="img/thumbs/2-1.jpg">
</a>



如果你的屏幕分辨率是1366x768,那么baguetteBox.js插件就会选择"img/medium/2-1.jpg"这张图片来显示。二如果屏幕分辨率是1440x900,插件会选择"img/big/2-1.jpg"这张图片。href属性中指定的图片是为了兼容旧的浏览器二设置的一张通用图片。

baguetteBox.js响应式lightbox插件的github地址为:https://github.com/feimosi/baguetteBox.js


授权方式:共享版

适合环境: Chrome/Firefox/Opera/Safari/IE9+

官方网站: 暂无

在线演示

0
猜你喜欢
更多发现
子导航JS代码