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

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

 76259  443  查看评论 (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的值,再赋值进去

相关插件-图片展示

仿qq空间图片展示效果

使用方法简单详细,类似于qq空间的图片展示效果
  图片展示
 47055  475

jQuery移动端对图片进行拖拽与旋转等操作

选着一个背景模板 然后对图片进行拖拽或者旋转一个角度 或者放大和缩小 进行调整 然后保存下来
  图片展示
 24412  303

jQuery鼠标滚轮放大缩小查看图片(原创)

使用jquery实现点击放大图片之后,使用鼠标滚轮放大缩小图片,点击遮罩关闭图片
  图片展示
 58340  378

焦点效果

类似于百叶窗的效果
  图片展示
 34586  362

讨论这个项目(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?? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复