:::

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. 點擊縮圖就會像這樣:

:::

書籍目錄

展開 | 闔起

http%3A%2F%2Fcampus-xoops.tn.edu.tw%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbsn%3D52%26tbdsn%3D1838

計數器

今天: 1446144614461446
昨天: 1416141614161416
總計: 7340093734009373400937340093734009373400937340093