How to use Layui to achieve image thumbnail enlargement effect

How to use Layui to achieve image thumbnail enlargement effect

Layui is a lightweight front-end framework that is simple and easy to use. It provides a wealth of components and functions to facilitate developers to quickly build pages. Among them, Layui's picture thumbnail enlargement effect is a very practical function, which can make it more convenient for users to view pictures.

In this article, we will introduce in detail how to use Layui to achieve the image thumbnail enlargement effect, and provide specific code examples.

First, we need to introduce the relevant files of Layui. Add the following code to the head of the HTML page:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-layer@3.1.1/dist/layui.css" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/layui-layer@3.1.1/dist/layui.js"></script>

Next, we need to create a container to display images, the code is as follows:

<div class="img-container">
  <img src="path/to/image.jpg" alt="Image" class="img-thumbnail" />
</div>

In this container, we use The img tag is used to display images, and the img-thumbnail class is added to set the style of the image.

Next, we need to write a piece of JavaScript code to achieve the enlargement effect of image thumbnails. The code is as follows:

$(".img-thumbnail").on("click", function() {
  layer.photos({
    photos: {
      data: [
        {
          src: $(this).attr("src")
        }
      ]
    },
    shade: 0.7
  });
});

This code first uses the jQuery selector to select all items with .img-thumbnail class pictures. Then, use Layui’s layer.photos method to achieve the image magnification effect.

In the layer.photos method, we need to pass in a parameter, where photos.data represents the data source of the image. Here we put the of the image The src attribute is passed in as data. shade represents the transparency of the mask layer, and the value range is 0-1. The larger the value, the more opaque the mask layer is.

Finally, at the bottom of the page, we need to initialize Layui, the code is as follows:

<script>
layui.use('layer', function(){
  var layer = layui.layer;
});
</script>

This code uses the layui.use method to load Layui's layer module, and initialized the layer object in the callback function.

So far, we have completed the code writing to use Layui to achieve the image thumbnail enlargement effect. When the user clicks on the picture, an enlarged picture box will pop up for the user to view.

To sum up, this article introduces how to use Layui to achieve the image thumbnail enlargement effect through sample code. With Layui's simple and easy-to-use approach, we can easily implement this feature and provide a better user experience. Hope this article is helpful to you!

The above is the detailed content of How to use Layui to achieve image thumbnail enlargement effect. For more information, please follow other related articles on the PHP Chinese website!