星空2020 2022-08-12 16:21 采纳率: 66.7%
浏览 45
已结题

如何在Layui table里点击放大图片?

Layui前台,PHP后台数据
如何在Layui table里点击放大图片?

PHP读取数据库,json输出,id,name,userIcon,数据库里仅仅显示图片的名称。

<script src="./layui/layui.all.js" charset="utf-8"></script>
  <script>
    layui.use('table', function () {
      var table = layui.table;
      var laydate = layui.laydate;
      var form = layui.form;
      var $ = layui.jquery;
                
      //绑定时间选择器
     laydate.render({
        elem:'#start'
      })
      laydate.render({
       elem:'#end'
      })
        
      var tableIns = table.render({
        elem: '#test1'
        ,url: './demo_news_data.php'
        ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
        ,title:'公告窗'
        ,loading:true
        ,height:'full-100'
        //,totalRow: true //开启合计行(在这里开启合计)
        ,cols: [
          [
            {field: 'id', title: 'ID', sort: true, style: 'font-size:12px'}
          , {field: 'sample_picture', title: '明细', align:'center', align:'center',templet: "#picPathItem"}
          , {fixed: 'right', title:'编辑', toolbar: '#operation',style: 'font-size:12px'}
          ]
        ],
        where:{
        }
        , page: true
        , limits: [50,100,150,200,250,300,350,400,450,500]
        , limit: 50 //每页默认显示的数量
          
      });
 </script>


 <!--图片展示-->
    <script type="text/html" id="picPathItem">
       <img src="/demo_icon/{{d.sample_picture}}" style="cursor: pointer; width:50px"  onclick="photograph(this)"/>
    </script>

<script>
    // 点击图片变大
function photograph(t) {
    //if(t.src == null||t.src == ''){
        //return;
    //}
    console.log(t)
    layer.open({
        type: 1,
        skin: 'layui-layer-nobg', //加上边框
                 title: false,
                 closeBtn: 0,
                 shadeClose: true, //点击阴影关闭
        area: ['60%', '70%'], //宽高
        area: [$(t).width + 'px', $(t).height + 'px'], //宽高
        shadeClose: true, //开启遮罩关闭
        end: function (index, layero) {
            return false;
        },
        content: '<div style="text-align:center"><img src="' + t.src + '" /></div>'
    });
}
</script>

当前点击图片可以放大一点,但图片并不是显示的原始大小,也就是并没有完全放大。如下:

img

  • 写回答

1条回答

      报告相同问题?

      相关推荐 更多相似问题

      问题事件

      • 系统已结题 8月27日
      • 已采纳回答 8月19日
      • 修改了问题 8月18日
      • 修改了问题 8月12日
      • 展开全部

      悬赏问题

      • ¥15 模型导入SP后贴图纹理只有一个,拆了四张UV的,怎么解决?
      • ¥15 检索带order by 非常慢
      • ¥20 python 爬虫 token 加密方式
      • ¥20 IAR环境报错reading CPU status failed
      • ¥15 数组问题,刚学C语言
      • ¥20 Python如何读取指定播放设备的音频帧?
      • ¥15 用dnspy修改游戏数据报错
      • ¥15 关于unity打包成webgl后页面上不显示服务端接收到的数据的问题
      • ¥16 (大一)有偿 想学会 excel数据处理和分析🥹
      • ¥15 matlab导入工具箱提示:此类型的变量不支持使用点进行索引错误