Layer front-end component in layui implements image display function

This article mainly introduces the method of realizing the image display function of the layer front-end component in layui, and analyzes the operation method and related precautions of the layer component in layui to call the image display function in the form of examples, and provides layer and layui source code downloads, which are required Friends can refer to it, I hope it can help everyone.

The example in this article describes how the layer front-end component implements the image display function. Share it with everyone for your reference, the details are as follows:

Implement the image display function: layer

1. Here we introduce a layer front-end component

layer is a highly praised The best web elastic layer component, she has a comprehensive solution,
is committed to serving developers of all levels, your page will easily have a rich and friendly operating experience.

A few points to note here: Before using the layer front-end component, we need to introduce the layer’s js file

<script type="text/javascript" src=".../.../layer/layer/layer.js"></script>
<script type="text/javascript" src=".../...//layer/layer/extend/layer.ext.js"></script>

Note: The layer.js file should be introduced after jquery, because layer.js is based on jquery.js!

2.json

Json is also required to implement the image display function:

The specific usage is as follows:

{ //您服务端接口需严格按照下述格式返回
    "status": 1,  //请求的状态，1表示成功，其它表示失败
    "msg": "", //状态提示语
    "title": "",  //相册标题
    "id": number型,  //相册id
    "start": 0, //初始显示的图片序号，默认0
    "data": [  //相册包含的图片，数组格式
      {
        "name": "", //图片名
        "pid": number型, //图片id
        "src": "", //原图地址
        "thumb": "", //缩略图地址
        "area": [638, 851] //原图宽高
      }
    ]
}

Use such as:

StringBuilder str = new StringBuilder();

return str.toString();

Operation from DOM Look at the front-end componentization of Vue&React,

Layui table component initialization loading data and other examples are explained

jQuery encapsulated paging component is explained

The above is the detailed content of Layer front-end component in layui implements image display function. For more information, please follow other related articles on the PHP Chinese website!