網站服務項目
當前位置: 首頁 > 建站知識 > 【WordPress教程】給文章頁增加圖片Fancybox燈箱效果/支持放大自動播放等

【WordPress教程】給文章頁增加圖片Fancybox燈箱效果/支持放大自動播放等

發布于:建站知識來源:郴州網站建設作者:www.5156123.live 點擊: 256 次
  

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=”https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css” />

<script src=”https://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 文件最后一個 ?> 的前面即可。

隱藏內容:

/*

==================================================

fancybox圖片燈箱效果

==================================================

*/

add_filter(‘the_content’, ‘fancybox1′);

add_filter(‘the_content’, ‘fancybox2′);

function fancybox1($content){

global $post;

$pattern = “/<img(.*?)src=(‘|\”)([^>]*).(bmp|gif|jpeg|jpg|png|swf)(‘|\”)(.*?)>/i”;

$replacement = ‘<a$1href=$2$3.$4$5 data-fancybox=”images”><img$1src=$2$3.$4$5$6></a>';

$content = preg_replace($pattern, $replacement, $content);

return $content;

}

function fancybox2($content){

global $post;

$pattern = “/<a(.*?)href=(‘|\”)([^>]*).(bmp|gif|jpeg|jpg|png|swf)(‘|\”)(.*?)>(.*?)<\/a>/i”;

$replacement = ‘<a$1href=$2$3.$4$5 data-fancybox=”images”$6>$7</a>';

$content = preg_replace($pattern, $replacement, $content);

return $content;

}

 

 
------分隔線----------------------------
------分隔線----------------------------
金信达配资