使用layui实现图片放大

html
这个是拿后台图片循环展示

      <div class="layui-upload" id="upload-thumb" style="width: 1000px">
      <!-- 循环图片 -->
      {notempty name="$serve.imgs"}
        <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">管路图</label>
        {foreach $serve.imgs as $k =>$v}
        <div  style="float: left;margin-left:20px" class="deleteds{$k}">
          <div class="layui-upload-lists">
            <img name="img" class="layui-upload-img" id="demo1" width="150" height="150" src="{$serve.imgs[$k]}">
            <p id="demoText"></p>
          </div>
        </div>
        {/foreach}
        </div>
      {/notempty}


      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button type="reset" class="layui-btn"  lay-submit lay-filter="clear" id="clear" >清空图片</button>
        </div>
      </div>

这个是js

//记得引用js和
    <script src="__PUBLIC__/layui/layui.js"></script>
    <script src="__PUBLIC__/jquery/jquery.min.js"></script>

    <script type="text/javascript">
      layui.use(['jquery','layer','form'],function(){
        var $=layui.jquery
            ,layer=layui.layer
            ,form=layui.form
        $('.layui-upload-img').click(function(){
            console.log($(this).attr('src'))
            var imgSrc=$(this).attr('src')
            layer.open({
                type:1
                ,title:false
                ,closeBtn:0
                ,skin:'layui-layer-nobg'
                ,shadeClose:true
                ,content:'<img alt=" + name + " title=" + name + " src=" + imgSrc + " height=800px; width=800px;" + "/>‘
                ,scrollbar:false
            })
        })
    })

    </script>

图片效果