The layer front-end component implements the image display function method

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.

Realize the image display function: layer

1. Here we introduce a layer front-end component

Layer is a web elastic layer component with excellent reputation. It has all the Fangfang's solution is dedicated to serving developers at all levels. Your page will easily have a rich and friendly operating experience.

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

or click here to download from this site.

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: layer.js file It 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 of # follows the link above and must be accurate.

The final return is as follows:

return str.toString();

For specific usage, you can also go to the official website http://layer.layui.com/ View

Related recommendations:

Detailed example of simple implementation of jQuery upload image display preview function

JS method to control image display size [Image proportional scaling function]

PHP image upload class with image display_PHP tutorial

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