Layer front-end component picture display function

This time I bring to you, what are the precautions, the following is a practical case, let's take a look.

Implement picture display function: layer

1. Here we introduce a layer front-end component

Layer is a web elastic layer component with excellent reputation. It has a comprehensive solution and is committed to serving developers of all levels. Your page will easily have a rich and friendly operating experience.

Official website download address: http://layer.layui.com/

Or click here

this site to download.

There are specific usage methods

Note a few points 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();

The append method is linked as above and must be accurate

The final return is like:

return str.toString();

The specific usage can also be viewed on the official website

http://layer.layui.com/

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to php Chinese Other related articles online!

Recommended reading:

Use JS timer to implement the progress bar

Detailed explanation of the use of vue-router

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