画廊插件baguetteBox.js

所属分类:媒体-图片展示

 46622  360  查看评论 (8)
分享到微信朋友圈
X
画廊插件baguetteBox.js ie兼容8

特点

        用纯JavaScript编写的,无依赖性要求

        多个画廊支持自定义选项

        触屏设备支持刷卡手势

        现代简约风格

        图像字幕支持

        响应的图像

        CSS3转换

        SVG按钮,没有额外的文件下载

使用方法

下载baguetteBox.min.css和baguetteBox.min.js文件并添加到你的页面。

<link rel="stylesheet" href="css/baguetteBox.min.css">
<script src="js/baguetteBox.min.js" async></script>


初始化脚本运行:

baguetteBox.run('.gallery', {
  // Custom options
});


其中第一个参数是一个选择器(或画廊)包含一个标签。HTML代码可能看起来像这样:

<div class="gallery">
    <a href="img/2-1.jpg" data-caption="Image caption"><img src="img/thumbs/2-1.jpg"></a>
    <a href="img/2-2.jpg"><img src="img/thumbs/2-2.jpg"></a>
  ...
</div>
相关插件-图片展示

纯css3放大镜

通过css3样式实现放大镜的效果
  图片展示
 42733  378

图片点击放大并居中显示

纯js实现的一个图片点击放大并居中显示的插件,支持自定义图片详情,可作为图片浏览插件,也可自行改写
  图片展示
 52350  356

jQuery蜂窝相框(HexagonBg.js)

jQuery六边形相框自动生成
  图片展示
 22355  303

CSS3三角形图片展示

CSS3三角形图片展示
  图片展示
 39512  396

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ?? 0
    2018/12/6 10:28:50
    到最后一张的时候,点击右面按钮 如何提示已经是最后一张了? 回复
    (^ω^) 0
    2018/8/15 9:04:12
    能跨域吗?或者有这样效果的但能跨域的插件推荐吗
        areyouOk0
        2018/8/15 10:22:51
        这就是个图片地址调用,和跨域有什么关系!
    回复
    QiceCream 0
    2017/8/2 15:06:45
    在IE8下,浏览完例一(指点开大图,然后点箭头浏览下一张),再把例二浏览一遍,重新回去点开例一大图,中间就会出现一个白色方块,而且偶尔浏览下一张图(如例一第二张图)会显示一片黑这是为什么? 回复
    子津 0
    2017/6/1 15:45:53

    点击小图直接跳转href的链接?怎么只是蒙城层图显示?

    回复
    kofoto 0
    2016/11/25 23:11:33
    能否响应手机返回键关闭弹出层,返回到图片列表,而不是返回图片列表的上一步? 回复
    为之奋斗 0
    2016/3/8 0:03:16
    拒绝延迟症 0
    2015/7/31 15:07:08

    非常有用的分享很炫酷~~

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复