Picture carousel effect code collection under layui

The following show displays the image set in the layui table table list, and uses the layui image carousel effect.

<script>
layui.use(['table', 'tree', 'layer','jquery'], function () {

//改变宽高
        var h = document.body.clientHeight&&document.documentElement.clientHeight - 80;//窗口高度
         var w = document.body.clientWidth&&document.documentElement.clientWidth - 10;//窗口高度
         //监听改变窗口大小
         window.onresize = function(){
            h = document.body.clientHeight&&document.documentElement.clientHeight - 80;//窗口高度
            w = document.body.clientWidth&&document.documentElement.clientWidth - 10;//窗口高度
            table.reload('idTest',{height:h,width: w});//刷新数据表格
         }

//方法级渲染
        window.demoTable = table.render({
            elem: '#idTest'
            ,id:'idTest'
            ,url : '<%=path%>/activity/getOrglifeListByOrgCode'
            ,width : w
            ,height : h
            , cols: [[ //标题栏
                 {checkbox: true, LAY_CHECKED: false, filter: 'test'}
               // , {field: 'ID', title: '序号', width: 150, sort: true, align: 'center'}
                , {field: 'PO_NAME', title: '组织名称', width: 250, align: 'center'}
                , {field: 'SUBJECT', title: '活动主题', width: 120, align: 'center'}
                , {field: 'PO_LIFE_TYPE_NAME', title: '生活类型', width: 180, align: 'center'}
                , {field: 'POLIFETIME', title: '活动时间', width: 180, align: 'center'}
                , {field: 'VENUE', title: '活动地点', width: 100, align: 'center'}
                , {field: 'PHOTO_UUID', title: '图片集', width: 200, align: 'center',templet:'#imgs'}
                , {field: 'ISOPEN', title: '是否开放', width: 120, align: 'center',templet:'#isopen'}
                , {field: 'PM_NAME', title: '主持人', width: 150, align: 'center'}
                , {field: 'partake', title: '参与人', width: 150, align: 'center',templet:'#join'}
                , {field: 'CREATETIME', title: '记录时间', width: 220, align: 'center'}
                , {field: 'PM_NUM', title: '参与数', width: 85, align: 'center'}
                , {title: '操作', width: 130, align: 'center', toolbar: '#barDemo'}
            ]]
            , page: true //是否显示分页
            ,limits : [ 10, 20,50, 100 ]
            ,limit : 20
            ,done:function(res,curr,count){
                $('table tr').on('click',function(){
                     $('table tr').css('background','');
                     $(this).css('background','<%=PropKit.use("config.properties").get("table_color")%>');
                 });
            }
        });

})

</script>

Among them, the Layui templet is used to view the picture set, and the id number is imgs, as shown below

<script type="text/html" id="imgs">
       <a class="openimg" href='javascript:;' onclick='showImages("{{d.PHOTO_UUID}}")' lay-event="img">查看图片集</a>
</script>

In the list display is a hyperlink, the click event calls the showImages method. as follows:

//图片弹窗
    function showImages(uuid){
        $.ajax({
            cache:false,
            type:'POST',
            dataType:"json",
            url:'<%=path%>/activity/showMediaFiles',
            data:{"uuid":uuid},
            error: function () {
                alert('请求失败');
            },
            success:function(res){
                console.log(res)
                layer.photos({
                    photos: res
                    ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
                  }); 
            }
        });
    }

According to the official statement, using the layer.photos plug-in, the data organization has a certain standard. The following is an example of the data format of the official website:

{
  "title": "", //相册标题
  "id": 123, //相册id
  "start": 0, //初始显示的图片序号，默认0
  "data": [   //相册包含的图片，数组格式
    {
      "alt": "图片名",
      "pid": 666, //图片id
      "src": "", //原图地址
      "thumb": "" //缩略图地址
    }
  ]
}

I am using the Jfinal framework, and I can assemble the json format data required by layui photo in <%=path%>/activity/showMediaFiles.

// 组织生活查看图片集
    public void showMediaFiles(){
        String orgCode = getSessionAttr("orgCode");
        String uuid = getPara("uuid");
        // 以下是自己封装的一个远程调用方法，具体底层还是Jfinal HttpKit.post(url,data)的调用
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("USER_ID", orgCode);
        map.put("UUID", uuid);
        String res_showMediaFiles = sendPostRequest("MgrActivityApi", orgCode, "showMediaFiles", "857", map);
        JSONObject jo_showMediaFiles = JSONObject.fromObject(res_showMediaFiles);

        JSONArray arr_photoes = new JSONArray();
        JSONObject obj_photo = new JSONObject();
        if(jo_showMediaFiles.getInt("code")==0){
            JSONArray photoes = jo_showMediaFiles.getJSONArray("data");
            for(int i =0 ;i<photoes.size();i++){
                JSONObject photo = photoes.getJSONObject(i);
                obj_photo.put("alt", "图片名");
                obj_photo.put("pid", 666);
                obj_photo.put("src", PropKit.use("config.properties").get("url")+getSessionAttr("REGION_CODE")+"/"+photo.getString("FILE_PATH"));
                obj_photo.put("thumb", "");
                arr_photoes.add(obj_photo);// 追加到JSONArray中
            }
        }
        Map<String,Object> dataMap = new HashMap<String,Object>();
        // 组装layer.photo需要的json格式数据
        dataMap.put("title", "");
        dataMap.put("id", 123);
        dataMap.put("start", 0);
        dataMap.put("data", arr_photoes);
        System.out.println(JsonKit.toJson(dataMap));
        renderJson(JsonKit.toJson(dataMap));
    }

The final display effect is as follows:

Click on one of the columns, the effect of picture rotation will pop up, and multiple pictures can be swiped left and right.