jquery实现点击缩略图在弹出层显示原图功能

场景：列表页展示图片，缩略图。点击图片，在当前页面，用1个窗口，展示对应的大图或者原图。

之前采用jquery插件imgbox，有问题，废弃。

又下载了一个zoomify，放大的，不符合要求。点击查看“大图”，只是放大的功能，而不是展示原图的url。

原图的url和缩略图的url是不同的。

后来实在是懒得研究这玩意了，就1个对话框，手动展示1个页面，页面的内容是1个图片。图片在当前上下文知道，也不需要Iframe等麻烦的原始。

项目正好使用了layui，用它的对话框就行了。

网上正好也搜到了1个对应的实现，核心代码：

     var img = "<img src='" + $("#jiaoguitu").attr("src") + "' />";
    //捕获页
    layer.open({
        type: 1,
        shade: false,
        title: false, //不显示标题
        //area:['600px','500px'],
        area: [img.width + 'px', img.height+'px'],
        content: img, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
        cancel: function () {
            //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
        }
    });

var img = new Image();
    img.src = $("#jiaoguitu").attr("src");  
     var imgHtml = "<img src='" + $("#jiaoguitu").attr("src") + "' />";
    //捕获页
    layer.open({
        type: 1,
        shade: false,
        title: false, //不显示标题
        //area:['600px','500px'],
        area: [img.width + 'px', img.height+'px'],
        content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
        cancel: function () {
            //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
        }
    });

参考文章

https://blog.csdn.net/sxf359/article/details/72771529

参考作者的代码，自己的写法如下：

html页面，用了vue，大概如此：

img元素的src是缩略图图片，

https:///2018/11/jtn21162644744195.jpg?x-oss-process=image/resize,w_250

bigSrc自定义属性存放原图的url。

https:///2018/11/jtn21162644744195.jpg

js代码：

vue获得图片列表正好，给img.zoom循环绑定点击事件。

点击的时候，找到bigSrc，用1个对话框展开。

这里没有按照原作者的思路，用img的宽度和高度作为对话框的宽度和高度，而是用固定宽度和高度。

放大的代码，很简洁，也符合需要。

axios.post(
                    config.photoListData,
                    urlParams(params)
            ).then(function(res){
                that.page=res.data.page;
                  renderLayuiPage(photoApp,that.page);
                   that.$nextTick(
                           function(){ 
                                //渲染之后，再绑定
                                 $("img.zoom").each(function(){
                                     $(this).bind("click",function(){
                                         var img = "<img src='" + $(this).attr("bigSrc") + "' />";
                                         //页面层
                                         layer.open({
                                           type: 1,
                                           skin: 'layui-layer-rim', //加上边框
                                           area: ['1200px', '540px'], //宽高
                                           content: img
                                         });
                                     });
                                 });
                          });
            });
--------------------- 
作者：小雷FansUnion 
来源：CSDN 
原文：https://blog.csdn.net/FansUnion/article/details/86352810 
版权声明：本文为博主原创文章，转载请附上博文链接！

jquery实现点击缩略图在弹出层显示原图功能

猜你喜欢