评论：功能强大的jQuery图片查看插件Magnify  [查看原文]

nzb3290
2018/4/15 23:45:05
是不是没引 font-awesome 图标

nzb3291
2018/4/13 13:05:09
有一个 data-group 属性就是分组用的，可以将不同的图片组分组，比如 data-group="a"、data-group="b"

有●若无□0
2018/9/29 16:21:33
你的回答太亮了，完美解决了我目前遇到的分组查看难题，非常感谢

nzb3290
2018/4/11 10:20:43
请关注官网的更新

nzb3290
2018/3/23 10:14:39
你看看这个插件符合你的要求吗
https://github.com/jackmoore/wheelzoom

珠穆雪峰?0
2018/5/9 15:33:42
jQuery有自带触发事件,可以页面加载时触发图片的click事件.

nzb3290
2018/3/23 10:15:55
解决了吗

你好我问下 

<img datamagnify="gallery" datasrc="big1.jpg" src="small1.jpg">

datasrc可以是动态请求吗？我后台通过流的方式输出图片行吗

nzb3290
2018/2/6 17:35:57
试了一下，可以的

nzb3290
2018/2/6 14:45:34
是不是没引 fontawesome 图标？

为什么我用报错了呢

nzb3290
2018/2/6 19:46:04
具体是什么错

这个有双击显示大图的事件吗？

nzb3291
2018/1/17 10:29:50

暂时还没有，主要是因为浏览器端很少有双击事件，不过插件后期可能会添加双击事件的选项吧

月小淡眉弯。0
2018/1/17 11:19:54

好吧  谢谢

这个有bug呀 连续点击就会出现很多张  还有在点击图他图片的时候之前点击的那张的大图应该移除呀

nzb3290
2018/1/17 10:25:59
这个插件支持多实例，所以出现多个是正常的。该功能参考 Windows 图片查看器。

月小淡眉弯。0
2018/1/17 11:21:28

但是连续一直点一张图片的时候也会出现很多张呀  然后关闭也要相应点击很多次才能关掉  这种应该不太好吧

nzb3291
2018/1/17 12:03:50
Windows 图片查看器双击也是出现多个，插件之后会添加多实例选项，这样就可以了

珠穆雪峰?1
2018/5/9 15:40:45

可以先将所有图片加载到magnify容器,然后在触发第一张图片,可以实现你想要的效果;具体如下:


function getImg(imgUnid, dealerId) {
    var url = path + "/query/parkRecord/image";
    //清理原图片缓存
    $('[data-show=add]').remove();

    $.ajax({
        url: url,
        data: {
            "imgUnid": imgUnid
        },
        type: "post",
        dataType: "json",
        success: function(returnData) {
            var imgObjectList = returnData.imgObjectList;
            if (null != returnData && imgObjectList.length > 0) {
                for (var i = 0, j = 1; i < imgObjectList.length; i++, j++) {
                    if (null != imgObjectList[i] && null != imgObjectList[i].imgUrl && "" != imgObjectList[i].imgUrl && imgObjectList[i].imgUrl != "null") {
                        $("#passImg").append('<img data-show="add"  data-caption="图' + j + '(共' + imgObjectList.length + '张)" data-src="' + imgObjectList[i].imgUrl + '"  src="' + imgObjectList[i].imgUrl + '" >');
                    }
                    //初始化新增的图片对象
                    $('[data-show=add]').magnify(options);
                }
            }
        },
        complete: function() {
            if ($('[data-show=add]').length > 0) {
                $('[data-show=add]').first().click();
            } else {
                $('#passImg img').magnify(options);
                $('[data-show=default]').click();
            }
        }
    });
}

nzb3290
2018/1/5 21:59:18

IE8 功能受限，请关注官网的更新动态

nzb3290
2018/1/14 23:17:30

这个支持 IE8

https://github.com/nzbin/magnify-lower