Home > Article > Web Front-end > How to use Layui to achieve image thumbnail display effect

How to use Layui to achieve image thumbnail display effect

PHPzOriginal: 2023-10-24 10:07:50820browse

Introduction:
With the development of the Internet and mobile Internet, images are widely used on the Internet. In different scenarios, we often encounter the need to display a large number of images. If displayed directly in the original image size, it will not only waste a lot of web page space, but also affect the page loading speed. Therefore, thumbnail display of images is a very important technical means. Layui is an excellent front-end development framework that provides a set of simple and easy-to-use components. This article will introduce how to use Layui to achieve image thumbnail display effects, and provide specific code examples.

Introducing Layui
First, we need to introduce Layui resource files into the HTML page. Add the following code in the

tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/css/layui.css">
<script src="https://cdn.jsdelivr.net/npm/layui@2.5.6"></script>

Create a picture list
In the HTML page, we can create a

tag for wrapping. The code example is as follows:

<ul id="image-list">
  <li><img  src="image1.jpg" alt="How to use Layui to achieve image thumbnail display effect" ></li>
  <li><img  src="image2.jpg" alt="How to use Layui to achieve image thumbnail display effect" ></li>
  <li><img  src="image3.jpg" alt="How to use Layui to achieve image thumbnail display effect" ></li>
  ...
</ul>

Initialize the Layui component
In the <script> tag, use Layui's form component and laypage component to modify the image The list is initialized. <br>The code example is as follows: </script>

<script>
layui.use(['form', 'laypage'], function(){
  var form = layui.form;
  var laypage = layui.laypage;
  
  //初始化图片列表
  laypage.render({
 elem: '#image-list',
 layout: ['prev', 'page', 'next', 'skip'],
 limit: 10,
 jump: function(obj){
   //根据当前页数和每页显示数量，计算出应该展示的图片起始索引和结束索引
   var start = (obj.curr - 1) * obj.limit;
   var end = start + obj.limit;
   
   //对图片列表进行处理，只展示起始索引到结束索引之间的图片
   var $lis = $('#image-list li');
   $lis.each(function(index){
     if(index >= start && index < end){
       $(this).show();
     }else{
       $(this).hide();
     }
   });
   
   //重新渲染Layui的form组件，以便更新分页信息
   form.render();
 }
  });
});
</script>

Add thumbnail effect
After the initialization of Layui's form component and laypage component is completed, we can add thumbnails to each

tag Add thumbnail effects to pictures. First, add the class attribute to each How to use Layui to achieve image thumbnail display effect

tag, and then use Layui's image preview component to initialize these How to use Layui to achieve image thumbnail display effect

tags. The code sample is as follows:

<script>
layui.use(['form', 'laypage', 'layer'], function(){
  var form = layui.form;
  var laypage = layui.laypage;
  var layer = layui.layer;
  
  //初始化图片列表
  laypage.render({
 elem: '#image-list',
 layout: ['prev', 'page', 'next', 'skip'],
 limit: 10,
 jump: function(obj){
   //省略上述代码...
 }
  });
  
  //初始化图片预览组件
  $('.image-preview').each(function(){
 //获取图片原始地址
 var imageUrl = $(this).attr('src');
 //给图片绑定点击事件
 $(this).on('click',function(){
   //调用Layui的图片预览方法
   layer.photos({   
     photos: {
       data: [
         {
           src: imageUrl 
         }
       ]
     },
     anim: 5
   });
 });
  });
});
</script>

Complete sample code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>图片缩略图展示</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/css/layui.css">
</head>
<body>
  <ul id="image-list">
 <li><img  class="image-preview" src="image1.jpg" alt="How to use Layui to achieve image thumbnail display effect" ></li>
 <li><img  class="image-preview" src="image2.jpg" alt="How to use Layui to achieve image thumbnail display effect" ></li>
 <li><img  class="image-preview" src="image3.jpg" alt="How to use Layui to achieve image thumbnail display effect" ></li>
 ...
  </ul>

  <script src="https://cdn.jsdelivr.net/npm/layui@2.5.6"></script>
  <script>
  layui.use(['form', 'laypage', 'layer'], function(){
 var form = layui.form;
 var laypage = layui.laypage;
 var layer = layui.layer;

 laypage.render({
   elem: '#image-list',
   layout: ['prev', 'page', 'next', 'skip'],
   limit: 10,
   jump: function(obj){
     var start = (obj.curr - 1) * obj.limit;
     var end = start + obj.limit;

     var $lis = $('#image-list li');
     $lis.each(function(index){
       if(index >= start && index < end){
         $(this).show();
       }else{
        $(this).hide();
       }
     });

     form.render();
   }
 });

 $('.image-preview').each(function(){
   var imageUrl = $(this).attr('src');
   $(this).on('click',function(){
     layer.photos({
       photos: {
         data: [
           {
             src: imageUrl 
           }
         ]
       },
       anim: 5
     });
   });
 });
  });
  </script>
</body>
</html>

Summary:
Through the above steps, we can use Layui to implement image thumbnails Display of results. First, we need to introduce Layui's resource files, then create a picture list, and initialize it using Layui's form component and laypage component. Next, add a thumbnail effect to each image so that when the user clicks on the image, a large image preview will pop up. Finally, it's demonstrated using concrete code examples. I hope this article can help you achieve the effect of image thumbnail display.

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

layui html class ul li

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to Create a Dynamic Image Gallery Slider Using HTML, CSS, and jQueryNext article：How to Create a Dynamic Image Gallery Slider Using HTML, CSS, and jQuery

See more

How to use Layui to achieve image thumbnail display effect

Related articles