预览图文--galpop插件的使用

参考文章:https://blog.csdn.net/MPFLY/article/details/99682770#commentBox

公司需求,需要预览表格内的图片。学艺不精,遍寻网络,找到了一个galpop插件,符合需求,功能强大。官网介绍

由于表格是在js里面写的,使用时我遇到了一个问题,图片预览每次都是打开了一个新的iframe层,展示效果不好,不断的测试排除原因,发现是因为打开图片时没有执行插件方法,所以就直接打开了a标签的href,也就是图片链接,所以就变成了在新窗口打开图片。修改后的代码如下:

 $.ajax({
            url: path + '/userActivityApply/getUserActivityApplyList.do',
            type:'get',
            data:search,
            beforeSend: function(){
                $('.articleBox .noHtml').hide();
                $('.articleBox .allContentList').empty();
                $('.articleBox .loadingListBox').show();
            },
            success: function(data){
                $('.articleBox .loadingListBox').hide();
                $('.articleBox .noHtml').hide();
                if(data.status != 0){
                    return layer.msg(data.msg);
                }
                var data = data.data;
                var search = data.userActivityApply;
                var list = data.userActivityApplies;
                var currentPage = data.currentPage;
                var num = data.num;
                var pageSize = data.pageSize;
                var totalPage = data.totalNum;
                $('#pageNum').html(currentPage);
                $('#jumpPage').val(currentPage);
                $('#totalPage').html(totalPage);
                $('#pageSize').val(pageSize);
                $('#num').html(num);
                if(list.length > 0){
                    var html = '';
                    for(var i in list){
                        html += '<tr>'+
                            '<td class="img"><a href="http://myclub-new.oss-cn-beijing.aliyuncs.com/runOnline/f1783a82c811ed498f0b5fc1905803c2.png" class="galpop-single">' +
                                '<img src="'+list[i].image+'">' +
                            '</a></td>'+
                            '<td>'+list[i].userName+'</td>'+
                            '<td>'+list[i].name+'</td>';
                        if (list[i].userSex !== "") {
                            if (list[i].userSex == 0){
                                html += '<td>男</td>'
                            }
                            if (list[i].userSex == 1){
                                html += '<td>女</td>'
                            }
                        }else {
                            html += '<td>-</td>'
                        }
                        html += '<td>'+list[i].userAge+'</td>'+
                            '<td>'+list[i].userNumber+'</td>'+
                            '<td>'+list[i].time+'</td>'+
                            '<td>'+list[i].money+'</td>'+
                            '<td>'+(list[i].payment == 1 ? "微信支付" : "-")+'</td>';
                        if (list[i].type != ""&& list[i].type != null) {
                            if (list[i].type == 0){
                                html += '<td class="option">活动未开始</td>'
                            }if (list[i].type == 1){
                                html += '<td class="option">活动进行中</td>'
                            }if (list[i].type == 2){
                                html += '<td class="option">活动已结束</td>'
                            }if (list[i].type == 3){
                                html += '<td class="option">活动已下架</td>'
                            }
                        }else{
                            html += '<td class="option">-</td>';
                        }
                         if(delBtn){
                        html +='<td><i class="operaIcon layui-icon">&#xe671;</i><div class="operaBox">';
                        html += '<div class="deleteButton">'+
                            '<i class="layui-icon">&#xe640;</i>'+
                            '<span>删除</span>'+
                            '<input type="hidden" value="'+list[i].id+'">'+
                            '</div>'
                        }
                        html += "</td></tr>";
                    }
                    html = html.replace(/null/g, '-')
                    $('.articleList .allContentList').html(html);
                    $('.pageListBox').show();
                }else{
                    $('.articleBox .noHtml').show();
                    $('.pageListBox').hide();
                }
                form.render();
                //点击查看大图
                $('.galpop-single').galpop({
                    maxScreen: 50
                });

            },
            error: function(data){
                layer.msg('网络连接异常');
            }
        })

效果图:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值