:::

6-4-6 加入fancybox燈箱效果

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

     

  4. FancyBox 需要搭配 jQuery,所以也要安裝 jQuery
    npm install jquery

     

  5. 由於要引入 jQuery 及 FancyBox 的 js 及 css 檔,所以接著得修改 head.tpl,在最後加入
    <!-- 引入 jquery -->
    <script src="{$url}/node_modules/jquery/dist/jquery.min.js"></script>
    
    <!-- 引入 fancybox -->
    <link rel="stylesheet" href="{$url}/node_modules/@fancyapps/fancybox/dist/jquery.fancybox.min.css" />
    <script src="{$url}/node_modules/@fancyapps/fancybox/dist/jquery.fancybox.min.js"></script>
    

     

  6. 最後修改 op_show.tpl,將縮圖加上連結,並連結大檔
    <!-- 縮圖列表 -->
    {foreach $news.files as $file => $thumb}
      <a data-fancybox="gallery" href="{$url}/uploads/{$news.id}/{$file}">
        <img src="{$url}/uploads/{$news.id}/thumbs/{$thumb}" alt="{$file}" class="img-fluid img-thumbnail mb-3" />
      </a>
    {foreachelse}
      <img src="{$url}/images/none.png" alt="無圖檔" class="img-fluid img-thumbnail mb-3" />
    {/foreach}

     

  7. 最後點擊縮圖就會像這樣:
  8. 如果是影片也可以正常播放:

:::

書籍目錄

展開 | 闔起

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

計數器

今天: 4148414841484148
昨天: 5069506950695069
總計: 5134596513459651345965134596513459651345965134596