Maison > Article > interface Web > Comment utiliser Layui pour obtenir un effet d'affichage de vignettes d'image

Comment utiliser Layui pour obtenir un effet d'affichage de vignettes d'image

PHPzoriginal: 2023-10-24 10:07:50819parcourir

Comment utiliser Layui pour obtenir un effet daffichage de vignettes dimage

Introduction :
Avec le développement d'Internet et de l'Internet mobile, les images sont largement utilisées sur Internet. Dans différents scénarios, nous sommes souvent confrontés à la nécessité d'afficher un grand nombre d'images. Si elles sont affichées directement dans la taille d'origine de l'image, cela gaspillera non seulement beaucoup d'espace sur la page Web, mais affectera également la vitesse de chargement de la page. Par conséquent, l’affichage miniature des images est un moyen technique très important. Layui est un excellent framework de développement front-end qui fournit un ensemble de composants simples et faciles à utiliser. Cet article explique comment utiliser Layui pour obtenir des effets d'affichage de vignettes d'images et fournit des exemples de code spécifiques.

Présentation de Layui
Tout d'abord, nous devons introduire les fichiers de ressources Layui dans la page HTML. Ajoutez le code suivant dans la balise

<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>

Créez une liste d'images
Dans la page HTML, nous pouvons créer une balise

<ul id="image-list">
  <li><img  src="image1.jpg" alt="Comment utiliser Layui pour obtenir un effet d'affichage de vignettes d'image" ></li>
  <li><img  src="image2.jpg" alt="Comment utiliser Layui pour obtenir un effet d'affichage de vignettes d'image" ></li>
  <li><img  src="image3.jpg" alt="Comment utiliser Layui pour obtenir un effet d'affichage de vignettes d'image" ></li>
  ...
</ul>

Initialiser le composant Layui
Dans la balise <script>, utilisez le composant form et le composant laypage de Layui pour initialiser la liste d'images. <br>L'exemple de code est le suivant : </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>

Ajouter un effet de vignette
Une fois l'initialisation du composant form et du composant laypage de Layui terminée, nous pouvons ajouter des effets de vignette aux images dans chaque balise

Tout d'abord, ajoutez l'attribut class à chaque balise Comment utiliser Layui pour obtenir un effet d'affichage de vignettes d'image

, puis utilisez le composant d'aperçu d'image de Layui pour initialiser ces balises Comment utiliser Layui pour obtenir un effet d'affichage de vignettes d'image

L'exemple de code est le suivant :

<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>

Exemple de code complet

<!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="Comment utiliser Layui pour obtenir un effet d'affichage de vignettes d'image" ></li>
 <li><img  class="image-preview" src="image2.jpg" alt="Comment utiliser Layui pour obtenir un effet d'affichage de vignettes d'image" ></li>
 <li><img  class="image-preview" src="image3.jpg" alt="Comment utiliser Layui pour obtenir un effet d'affichage de vignettes d'image" ></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>

Résumé :
Grâce aux étapes ci-dessus, nous pouvons utiliser Layui pour obtenir l'effet d'affichage des vignettes de l'image. Tout d'abord, nous devons introduire les fichiers de ressources de Layui, puis créer une liste d'images et l'initialiser à l'aide du composant form et du composant laypage de Layui. Ensuite, ajoutez un effet de vignette à chaque image afin que lorsque l'utilisateur clique sur l'image, un grand aperçu de l'image apparaisse. Enfin, cela est démontré à l’aide d’exemples de code concrets. J'espère que cet article pourra vous aider à obtenir l'effet d'affichage des vignettes d'image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

layui html class ul li

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer un curseur de galerie d'images dynamique en utilisant HTML, CSS et jQueryArticle suivant：Comment créer un curseur de galerie d'images dynamique en utilisant HTML, CSS et jQuery

Articles Liés

Voir plus