純代碼給你的網站增加圖片燈箱效果，增強落地頁體驗

燈箱效果是我一直想加又沒有加的功能，正好最近百度在推移動落地頁檢測，順手做一下優化

我的檢測結果是：您的頁面可能存在圖片不可全屏查看，全屏查看后不可縮放 / 左右滑動的問題，影響落地頁體驗

我們可以直接使用 FancyBox 來完成我們的需求，FancyBox 是一款優秀的彈出框 Jquery 插件

1、允許我們用鼠標和鍵盤上的四個方向鍵切換圖片
2、可以根據當前窗口大小自動調整彈出框的大小，當我們改變瀏覽器窗口大小時，將會看到彈出框自動縮放
3、支持縮略圖列表、放大、全屏等功能
4、彈出框支持顯示多種類型的內容：圖片、html、視頻…
5、支持觸控、縮放手勢操作圖片

實現加入 FancyBox 燈箱效果教程

1、引入相關文件

可以將 FancyBox 的 js、css 文件下載到主題目錄中進行引入，這里我們直接使用 CDN 外鏈

請先在 header.php 文件的 head 標簽前引入 Jquery 文件

<script type='text/javascript' src="https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js"></script>

 

如果存在就跳過 (大部分應該都有)，然后在 footer.php 文件的標簽前引入 FancyBox 的 js、css 文件

<link rel="stylesheet" href="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.css" />
<script type="text/javascript" src="https://cdn.staticfile.org/fancybox/3.5.7/jquery.fancybox.min.js"></script>

 

2、增加 data-fancybox 屬性

這里分為兩種情況，一種為之前插入圖片的時候，添加過 <a> 標簽

即：【添加多媒體】→【上傳圖片或媒體庫】→選中圖片→點擊【插入至文章】之前，選擇【附件顯示設置】鏈接到【媒體文件】

需要將以下代碼添加到當前主題的 functions.php 文件中

// fancybox3圖片添加 data-fancybox 屬性
add_filter('the_content', 'fancybox');
function fancybox ($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;
}

 

另外一種是從來沒有添加過 <a> 標簽的，我們使用 js 自動添加鏈接到原圖

$(function() {
   $(".entry-content p img").each(function(i) {
      if (!this.parentNode.href) {
         $(this).wrap("<a href='" + this.src + "' data-fancybox='fancybox' data-caption='" + this.alt + "'></a>")
      }
   })
});

 

.entry-content p img 需要修改為你自己網站的圖片正文的 CSS 類，這上面 js 代碼加入到 header.php 或 footer.php 文件中

3. 初始化 fancybox

一切加載完成后，就可以初始化 FancyBox 了，在剛才引入的 FancyBox 的 js、css 文件下面增加

$(document).ready(function() {
   $("[data-fancybox]").fancybox()
});

 

如果一切順利，那么你的網站現在點擊圖片就可以看到圖片燈箱效果，不滿意默認效果？那就來自定義配置吧

在初始化的時候增加配置，比如這個樣子：

$(document).ready(function() {
   $("[data-fancybox]").fancybox({
      protect:true, // 禁用右鍵保存
   })
});

 

更多配置項查看文檔吧

今天查看落地頁檢測已經可以通過～

 

我的博客即將同步至騰訊雲+社區，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=1jvh9p01kmzgp