WordPress添加FancyBox图片灯箱效果

相信大家都知道現時的WordPress的默認主題給文章添加圖片後點擊圖片是不會放大的,即使圖片是設定了連結到「媒體檔案」也只會在當前頁或者新窗口打開圖片,這樣的瀏覽體驗是很糟糕的,至少我是這樣認為!不僅是WP官方的默認主題,某一些沒有那麼「高級」的佈景主題也是沒有圖片燈箱效果的,就好比目前NICE正在用的這款免費主題「ISOLA」就是如此。

WORDPRESS

那麼一些圖片燈箱插件就應運而生了,比如 「WP FancyZoom」等一些外掛,雖然說是解決了點擊圖片放大的功能,但也只是局限於單圖點擊放大,如果文章有多張圖片呢?雖然一張一張的點開也不會死人,但是不能愉快的左右切換上下圖是不是有點不爽呢?今天介紹一款名為FancyBox图片灯箱效果的代碼,不是插件哦!

FancyBox图片灯箱

FancyBox图片灯箱不僅可以點擊放大圖片,還支持手勢操作(點按滑鼠左鍵不松左右滑動可以切換上下張圖片,上下滑動可以退出大圖模式)、幻燈片播放、全熒幕查看、縮略圖模式以及圖片分享到社交媒體等功能;是不是很強大呢?而且文章圖片不需要設定連結到「媒體檔案」也能識別,還支援移動端,超級厲害的。

那麼要如何部署安裝FancyBox图片灯箱效果功能呢?

其實這個真的非常簡單了,首先你需要引入兩個JS檔案和一個CSS檔案。

第一個一般都不需要,因為多數情況下的主題都已經引進了。

<script src="//www.nice.im/wp-content/themes/nice/js/jquery-3.2.1.min.js"></script>

下面兩段為必須要引入的,你可以點擊此處下載代碼檔案>> 提取码:i4nf

<link rel="stylesheet" href="https://www.nice.im/wp-content/themes/nice/js/jquery.fancybox.min.css" />
<script src="https://www.nice.im/wp-content/themes/nice/js/jquery.fancybox.min.js"></script>

將上面檔案引入到你WordPress部落格的主題下的 header.php 檔案的 </head> 標籤之前後,你還需要將下面代碼程式引入到你的WP佈景主題下的 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;
}

擼完收工!現在FancyBox图片灯箱就部署好了,具體效果可以點擊下面圖片查看哦!

6 Replies to “WordPress添加FancyBox图片灯箱效果”

發表回覆

你的電郵地址並不會被公開。 必要欄位標記為 *