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

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

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

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

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

   タグを作成し、リストを作成できます。各画像の
   • タグを使用してラッピングします。コード例は次のとおりです:

     <ul id="image-list">
       <li><img  src="/static/imghwm/default1.png"  data-src="image1.jpg"  class="lazy" alt="Layuiを使用して画像のサムネイル表示効果を実現する方法" ></li>
       <li><img  src="/static/imghwm/default1.png"  data-src="image2.jpg"  class="lazy" alt="Layuiを使用して画像のサムネイル表示効果を実現する方法" ></li>
       <li><img  src="/static/imghwm/default1.png"  data-src="image3.jpg"  class="lazy" 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 のフォーム コンポーネントとレイページ コンポーネントの初期化が完了したら、それぞれの タグ 画像にサムネイル効果を追加します。まず、各 タグに 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>

   • 完全なサンプル コード

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

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

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

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