关于在layui的数据表格中使用 layui.photo 点击放大图片和切换左右图片

换不多说,直接上效果图, 第一次点击图片的时候需要点两下!!!

我这里用的是layui的数据表格,来看代码:

这个是绑定部分,d.table_img是图片地址数组。我这里循环了,class用的是demo+当前行的id,直接固定class的话会展示全部图片

<script id="showScreenhost" type="text/html">
            <div style="float:left;" class="demo{{d.table_id}}" >
                  {{# for(var j in d.table_img) { }}
                  <img style=" width:50px;height:50px;" id="photo" layer-src="{{d.table_img[j]}}" src="{{d.table_img[j]}}" >
                {{#} }}
            </div>
            </script>

这是数据表格表头,数据表格的图片表头尽量不要设置靠什么对其,不然会有意想不到的效果:

{ 
  field: 'table_img',
  title: '反馈图片',
  width: 200,
  templet: '#showScreenhost',
}

js部分:解释一下,我这里是切换当前行中的图片,所以先找到当前图片的父类,$(this).parent(),这里的photos一定要用类选择器。

 $(document).on('click', '#photo', function(){
                layer.photos({
                //类选择器  选择图片的父容器	  
                photos: '.'+$(this).parent().attr("class")
                ,anim: 5 //0-6的选择,指定弹出图片动画类型,默认随机(请注意,3.0之前的版本用shift参数)
            }); 
		});

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页