jQuery移动端图片查看插件photoswipe.js

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

 81022  445  查看评论 (30)
分享到微信朋友圈
X
jQuery移动端图片查看插件photoswipe.js ie兼容8

使用方法

1.class='pswp'的div需要直接放在页面中。

2.根据自己最外层div的类名来定义属性(如id='imgshow')

initPhotoSwipeFromDOM('#imgshow');
    $("#imgshow>figure>div").each(function(){
        $(this).height($(this).width());
});

3.根据自己从后台获取图片的大小,来计算出a标签里data-size的值,再赋值进去

相关插件-图片展示

JQ插件 放大镜 对比图 倍数可选

放大镜进行两张图片对比功能,可选放大倍数
  图片展示
 27880  353

鼠标划过图片放大效果

一般用于展示类,鼠标滑过,图片放大,焦点图
  图片展示
 48673  480
  图片展示
 45096  402

HTML5卡片人物介绍动画展示效果

HTML5卡片人物介绍动画展示效果ie9和ie10没有测试,ie8以下不支持。基于bootstrap框架制作
  图片展示
 49976  563

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

    醉人xxxx 0
    2024/3/1 16:47:44
    准备试试 希望好用 回复
    梦想盒子 0
    2022/11/4 4:09:52
    这个插件很好用 回复
    泛白的夜 0
    2022/4/17 23:39:05
    手机端怎么设置点击黑色背景或者图片来关闭弹出页面?目前只能通过右上角的 X 来关闭 回复
    Jenny 0
    2020/4/2 11:52:04
    请问,可以不定义弹层里图片的尺寸吗,定宽或定高,另一边自适应
        3倍的根号21
        2021/1/28 15:24:10

        里面的JS不完整,要加上这段代码:

        var img = new Image();
        img.src = linkEl.getAttribute('href');
        
        linkEl.setAttribute('data-size', img.naturalWidth + 'x' + img.naturalHeight);
        size = linkEl.getAttribute('data-size').split('x');

        这样就可以做到 获取图片的宽高,自适应

    回复
    南北. 0
    2020/2/22 17:25:09
    Peter@小飞侠 0
    2020/2/18 14:30:53
    好像点击后不能放大 回复
    2239329788 0
    2019/11/5 19:24:55
    我怎么点击一下图片 ,就可以缩小啊?像微信那种 回复
    Storm丶T1King 0
    2019/10/11 17:50:07
    不错,挺好用的 回复
    王志勇 0
    2019/8/29 15:38:23
    为什么没有看到关闭按钮分享按钮呢,然后按ESC退出查看模式,页面自动刷新? 回复
    文苑 0
    2019/6/27 11:48:48
    是否可以去掉shareButtons参数或者将其设置为false?? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复