SOP.JSP.点击图片放大 / 预览图片

• 简单版

<div class="row">
        <div class="col-sm-6 col-md-3"  id="zoomImage" >
            <img id="tong" src="你的图片url"
              style="max-width: 200px; max-height: 300px;"
              onclick="zoomImage(你的图片url)">
        </div>
  </div>

<!--这里我们引入了layui的样式-->
<!--layUI的demo：http://layer.layui.com/-->
 <script src="${ctx}/static/plugins/layui/layui.all.js"></script>
 <script type="text/javascript">
 function zoomImage(url) {
        $("#tong").attr("src", url);
        var height=400;
        var width=600;
        layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            shadeClose: true,
            area: [width + 'px', height + 'px'], //宽高
            content: "<img src=" + url + " />"  
        });
  } 
</script>

• jsp版

<div class="row">
    <c:if test="${not empty pics }">
      <c:forEach items="${pics}" var="pic" step="1" varStatus="status">
        <div class="col-sm-6 col-md-3"  id="zoomImage" >
            <img id="tong${status.count-1}" src="${pics[status.count-1]}"
              style="max-width: 200px; max-height: 300px;"
              onclick="zoomImage('${status.count-1}','${pics[status.count-1]}')">
        </div>
      </c:forEach>
    </c:if>
  </div>

<!--这里我们引入了layui的样式-->
<!--layUI的demo：http://layer.layui.com/-->
 <script src="${ctx}/static/plugins/layui/layui.all.js"></script>
 <script type="text/javascript">
 function zoomImage(index,url) {
        $("#tong"+index).attr("src", url);
        var height=400;
        var width=600;
        layer.open({
            type: 1,
            title: false,
            closeBtn: 1,
            shadeClose: true,
            area: [width + 'px', height + 'px'], //宽高
            content: "<img src=" + url + " />"  
        });
  } 
</script>