前言

本站之前使用的是auto-highslide圖片燈箱插件,但是效果不是很好,移動設備體驗差,今天推薦一款功能強大的非插件燈箱效果----Fancybox,支持圖片放大,圖片列表等,功能強大且移動端支持非常棒!

FancyBox 簡單介紹

Fancybox 是一個 JavaScript 庫,用于以優雅的方式呈現圖像,視頻和任何 HTML 內容。它具有您期望的所有功能 - 觸摸啟用,響應和完全可定制。

依賴

  • jQuery 3+ 是首選,但 fancyBox 適用于 jQuery 1.9.1+ 和 jQuery 2+

兼容性

  • fancyBox 包括對觸控手勢的支持,甚至支持縮放手勢。它非常適合手機和桌面瀏覽器。

特點

  • 移動第一:每個設備上看起來不錯;支持最常見的觸控手勢-雙擊,捏放和捏出來的圖像瀏覽; 水平滑動進行導航。
  • 多個實例:它可以打開一個模式,而另一種是仍然可見。
  • 快速和簡易安裝:就在兩個文件,無需編寫 JavaScript 代碼一行來實現。
  • 自動內容識別:支持最流行的網站諸如 YouTube,Vimeo 的和谷歌地圖的開箱。
  • GPU 加速:硬件加速的動畫有更好的表現。
  • 響應:設置使用任何 CSS 單位,瀏覽器將完成剩下的內容維度;所有的圖形,包括加載圖標,僅與 CSS 創建。

Fancybox 3 官方使用教程

<!-- 1. Add latest jQuery and fancyBox files -->

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>


<!-- 2. Create links -->

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>


<!-- 3. Have fun! -->

說明:其實使用方法很簡單,就是在文件頭(如主題內的 header.php 文件)中引入 jquery.fancybox.min.css 和 jquery.fancybox.min.js 兩個文件(可以使用以上代碼中的鏈接,或者直接下載后上傳到所使用主題文件夾內再添加),而 jquery-3.2.1.min.js 文件一般不用理會,因為大部分 WordPress 站點都已經引入有 jQuery 庫了。

接著只需要給我們站點文章內圖片的鏈接添加 data-fancybox 屬性即可,還可以使用 data-caption 屬性添加標題。例如:

<a href="image.jpg" data-fancybox data-caption="My caption">
    <img src =“thumbnail.jpg” alt =“My caption”/>
</a>

為文章頁內的圖片鏈接添加 data-fancybox 屬性可以使用函數自動添加,只需要將以下代碼添加到當前主題的functions.php 文件最后一個 ?> 的前面即可。

當前隱藏內容需要支付 29

已有 4 人支付

此代碼本站獨創,同時支持有a標簽的文章和沒有a標簽的文章,自動識別,無需手動給圖片添加a標簽。

效果展示

參與評論