5-8 加入fancybox燈箱效果

1. 目前點擊圖片是沒有反應的，我們希望點擊縮圖，可以出現大圖，若是影片則開始播放影片，但又不希望離開目前頁面，要作到這種效果，可以用燈箱效果工具來做，其中又以 FancyBox 最為有名。
2. FancyBox 官網：http://fancyapps.com/fancybox/3/
3. 安裝 FancyBox， 按 Ctrl+` 開啟終端機，並貼上以下指令執行之 ：

   npm install --save @fancyapps/ui

    

4. 由於要引入 FancyBox 的 js 及 css 檔，所以接著得修改 index_head.tpl，加入：

   <!-- 引入 fancybox -->
   <script src="/node_modules/@fancyapps/ui/dist/fancybox/fancybox.umd.js"></script>
   <link rel="stylesheet" href="/node_modules/@fancyapps/ui/dist/fancybox/fancybox.css" />

    

5. 最後修改 op_show.tpl，將縮圖加上連結，並連結圖檔。連結中須加入 data-fancybox="gallery" 才會有作用

   {foreach $news.files as $filename=> $file_path}
       <a href="{$file_path}" data-fancybox="gallery" data-caption="{$filename}">
           <img src="{$file_path}" alt="" class="img-thumbnail" style="object-fit: cover; width: 100%; height: 200px;">
       </a>
   {/foreach}

    

6. 最後修改 index_content.tpl，將縮圖也套上連結

   {if is_file(reset($news.files))}
       <a href="{reset($news.files)}" data-fancybox="gallery" data-caption="{reset($news.files)}">
           <img src="{reset($news.files)}" alt="" class="img-thumbnail"
           style="object-fit: cover; width: 100%; height: 200px;">
       </a>
   {else}
       <img src="https://picsum.photos/seed/picsum/400/400" alt="" class="img-thumbnail"
       style="object-fit: cover; width: 100%; height: 200px;">
   {/if}

    

7. 最後在 index.tpl 最下方加入 FancyBox 的套用語法：

   <!-- Bootstrap JavaScript Libraries -->
   <script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
   <script>
     Fancybox.bind("[data-fancybox]");
   </script>

    

8. 點擊縮圖就會像這樣：