UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery灯箱效果插件-Swipebox

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

 68643  354  查看评论 (23)
分享到微信朋友圈
X
jQuery灯箱效果插件-Swipebox ie兼容9
 查看演示  立即下载

主要特点

        滑动手势移动

        键盘导航的桌面

        CSS过渡使用jQuery后备

        针对UI图标支持视网膜

        简单的CSS定制


基本用法

使用Javascript

在您的页面中添加jQuery和swipebox脚本

<script src="lib/jquery-2.0.3.js"></script>
<script src="source/jquery.swipebox.js"></script>


CSS

在您的页面中添加swipebox CSS样式标签。

<link rel="stylesheet" href="source/swipebox.css">


HTML

使用特定的类为你的链接和使用title属性为标题。

<a href="big/image.jpg" class="swipebox" title="My Caption">
    <img src="small/image.jpg" alt="image">
</a>

绑定了“swipebox”类。

<script type="text/javascript">
    jQuery(function($) {
        $(".swipebox").swipebox();
    });
</script>

使用“rel”属性

你可以添加一个REL属性，你的链接到单独的画廊。

<!-- Gallery 1 -->
<a rel="gallery-1" href="big/image1.jpg" class="swipebox">
    <img src="small/image1.jpg" alt="image">
</a>
<a rel="gallery-1" href="big/image2.jpg" class="swipebox">
    <img src="small/image2.jpg" alt="image">
</a>
<!-- Gallery 2 -->
<a rel="gallery-2" href="big/image3.jpg" class="swipebox">
    <img src="small/image3.jpg" alt="image">
</a>
<a rel="gallery-2" href="big/image4.jpg" class="swipebox">
    <img src="small/image4.jpg" alt="image">
</a>

视频支持

只需在您的href属性粘贴视频网址。该脚本会自动检查它是否是一个视频网址，并在打开的swipebox视频。

<a class="swipebox-video" rel="视频" href="#">My Videos</a>

动态加载的幻灯片

你可以通过一个数组对象传递给swipebox动态设置您的画廊。

$("#gallery").click(function(e){
    e.preventDefault();
    $.swipebox([
        {href:'big/image1.jpg', title:'My Caption'}, 
        {href:'big/image2.jpg', title:'My Second Caption'}
    ]);
});

刷新方法

刷新方法可以让你重新加载幻灯片，如果在DOM发生了变化。

var swipeboxInstance = $(".a:visible").swipebox();
// Use the refresh method after your event is completed
swipeboxInstance.refresh();

检查打开状态

if ($.swipebox.isOpen){
    // do stuff
}

选项

<script type="text/javascript">
    jQuery(function($) {
        $(".swipebox").swipebox({
            useCSS : true, // false将强制使用的jQuery的动画 
            hideBarsDelay : 3000, // 0始终显示标题和动作条 
            videoMaxWidth : 1140, // 视频最大宽度 
            beforeOpen: function(){}, // 被叫开幕前 
            afterClose: function(){} // 被叫结束后 
        });
    });
</script>
相关插件-图片展示
查看更多

CSS3三角形图片展示

 CSS3三角形图片展示
  图片展示
 40340  398

jquery3D旋转相册

 jquery3D旋转相册
  图片展示
 59400  504

jQuery放大镜插件cloudzoom.js

 jQuery放大镜插件cloudzoom.js，可以实现切换图片，支持滚轮控制放大比例
  图片展示
 43390  411

jQuery画廊-least.js

jQuery画廊-least.js 类似于google图片搜索结果中的展示效果，least.js 随机和响应的JQUERY，HTML 5和CSS3画廊
  图片展示
 35385  330

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

    JoviChin 0
    2019/5/30 17:41:34
    要是能添加显示索引，并且在灯箱模式下再次点击即关闭这两个功能就完美了 回复
    随缘莫强求 0
    2019/2/17 15:30:05
    点击关闭按钮关闭不了
        澈つ0
        2019/3/27 16:14:03
        这个问题很大，点击了关闭按钮，然后又触发了全屏看图，无解
        "?╁鸣就、 ぃ 1
        2019/5/12 0:41:38

        587行的点击关闭事件里，改成 

        $('#swipebox-close').bind(action, function(event) {
    event.preventDefault();
    event.stopPropagation();
    $this.closeSlide();
});

        应该就行了

    回复
    画个逗号给明天" 0
    2018/8/7 14:25:51
    点击×号，没办法关闭放大的图片
        零点距离0
        2018/11/24 14:22:52
        我的也是
        零点距离0
        2018/11/24 14:23:35
        你解决了没法关闭图片的问题了吗
    回复
    子小士 0
    2017/12/28 23:49:23

    出现Uncaught Code.PhotoSwipe.createInstance: No images to passed是什么情况

    回复
    行者 0
    2017/12/8 10:26:24

    有一点不是特别的明白 点击小图放大状态  在次点击的时候 应该回到小图啊  关闭大图一低要点击×号么 

        万库容烟0
        2018/9/26 14:07:57
        在源码里找到x号的点击事件，然后把触发者换成你需要的html元素就行了
    回复
    ?????___Dream 0
    2017/9/28 17:04:18

    不能用高版本的jquery的吗

    回复
    yanguangran 3
    2017/8/31 9:42:07

    下载地址已失效

        西瓜0
        2017/8/31 11:39:19

        感谢反馈，已经修改好了，可正常下载

    回复
    隐身即无敌 0
    2016/6/30 10:06:05
    陌丶小文? 0
    2016/4/13 0:04:16
    怎么安装到wp博客中呢 回复
    游于艺/tiao 0
    2015/11/7 15:11:30

    移动端能否加上双击图片放大，再双击图片缩小的效果？

    如同微信中图片浏览的效果。

    还有怎么实现手机返回键退出Swipebox？

        天道酬勤0
        2016/4/27 17:04:55
        同求 请问这个问题你解决了没有了？
        。0
        2016/5/6 20:05:53
        同求啊！你们解决了吗？
        zhihuanwangaj0
        2016/8/4 18:08:26
        楼上几位大哥问题解决了吗？？？ 我也遇到相同的问题，不能缩放，求解决办法！！！
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复