ホームページ >ウェブフロントエンド >jsチュートリアル >Layuiを使用して画像のサムネイル表示効果を実現する方法

Layuiを使用して画像のサムネイル表示効果を実現する方法

PHPzオリジナル: 2023-10-24 10:07:50973ブラウズ

Layui を使用して画像のサムネイル表示効果を実現する方法

はじめに:
インターネットとモバイルインターネットの発展に伴い、画像はインターネット上で広く使用されています。。さまざまなシナリオで、大量の画像を表示する必要があることがよくありますが、元の画像サイズで直接表示すると、Web ページのスペースを大量に浪費するだけでなく、ページの読み込み速度にも影響します。したがって、画像のサムネイル表示は非常に重要な技術手段となります。 Layui は、シンプルで使いやすいコンポーネントのセットを提供する優れたフロントエンド開発フレームワークです。この記事では、Layui を使用して画像のサムネイル表示効果を実現する方法と、具体的なコード例を紹介します。

Layui の導入
まず、Layui リソースファイルを HTML ページに導入する必要があります。次のコードを

タグに追加します:

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

画像リストの作成
HTML ページで、

タグを使用してラッピングします。コード例は次のとおりです:

<ul id="image-list">
  <li><img  src="image1.jpg" alt="Layuiを使用して画像のサムネイル表示効果を実現する方法" ></li>
  <li><img  src="image2.jpg" alt="Layuiを使用して画像のサムネイル表示効果を実現する方法" ></li>
  <li><img  src="image3.jpg" alt="Layuiを使用して画像のサムネイル表示効果を実現する方法" ></li>
  ...
</ul>

Layui コンポーネントを初期化する
<script> タグで、Layui の画像を変更するフォームコンポーネントとレイページコンポーネントのリストが初期化されます。 <br>コード例は次のとおりです。 </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>

サムネイル効果の追加
Layui のフォームコンポーネントとレイページコンポーネントの初期化が完了したら、それぞれのタグ画像にサムネイル効果を追加します。まず、各 Layuiを使用して画像のサムネイル表示効果を実現する方法タグに class 属性を追加し、Layui の画像プレビューコンポーネントを使用してこれらのタグを初期化します。コードサンプルは次のとおりです。

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

完全なサンプルコード

<!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="Layuiを使用して画像のサムネイル表示効果を実現する方法" ></li>
 <li><img  class="image-preview" src="image2.jpg" alt="Layuiを使用して画像のサムネイル表示効果を実現する方法" ></li>
 <li><img  class="image-preview" src="image3.jpg" alt="Layuiを使用して画像のサムネイル表示効果を実現する方法" ></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>

概要:
上記の手順により、Layui を使用できるようになります。画像のサムネイル表示を実装します。まず、Layui のリソースファイルを導入し、次に画像リストを作成し、Layui のフォームコンポーネントとレイページコンポーネントを使用して初期化する必要があります。次に、各画像にサムネイル効果を追加して、ユーザーが画像をクリックしたときに大きな画像プレビューがポップアップ表示されるようにします。最後に、具体的なコード例を使用して説明します。この記事が画像のサムネイル表示の効果を実現するのに役立つことを願っています。

以上がLayuiを使用して画像のサムネイル表示効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

layui html class ul li

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML、CSS、jQuery を使用して動的な画像ギャラリースライダーを作成する方法次の記事：HTML、CSS、jQuery を使用して動的な画像ギャラリースライダーを作成する方法

続きを見る