Ripro 主題燈箱設置，默認鏈接文件到無怎麼辦？解決ripro圖片點擊放大問題

為了避免不必要的麻煩，在上傳圖片的時候，我設置的媒體文件默認鏈接，都是鏈接到無的。

然而，更換到ripro主題後，我發現沒有燈箱效果了。

在查閱 Ripro 主題的燈箱說明後，我才發現 ripro 的燈箱效果展示是需要將圖片鏈接到圖片地址的，也就是在上傳圖片時，需要選擇鏈接到媒體文件的。

這就頭大了，我所有文章里的圖片都是鏈接到無的。於是我就做了一翻研究，在保持上傳圖片默認鏈接到無的情況，為文章中的圖片添加<a>標籤並鏈接到圖片本身。

分析說明

FancyBox是一款優秀的彈出框Jquery插件，支持對放大的圖片添加陰影效果，對於一組相關的圖片添加導航操作按紐。

基於 fancybox 的燈箱插件、網站是很多的。我本來也想採用這種方式為我的網站添加燈箱效果。

在查看 Ripro 的源代碼時，我發現其實 Ripro 也是用的 fancybox 方案的。

這就很方便了，我不需要再另外引入 FancyBox的 js、css 文件以及添加 data-fancybox 屬性了。我需要做的，就是把圖片鏈接添加到圖片上。

代碼如下

<script type="text/javascript">$(function() {
   $(".article-content img").each(function(i) {
      if (!this.parentNode.href) {
         $(this).wrap("<a href='" + this.srcset + "' data-fancybox='fancybox' data-caption='" + this.alt + "'></a>")
      }
   })
});</script>

使用方法

將上述代碼複製粘貼到 RiPRO主題-設置中心 > 底部設置 > 網站底部自定義JS代碼 里，保存即可。

代碼解析

先複製一段ripro文章圖片的源代碼

<img class="size-full wp-image-4318 aligncenter lazyloaded" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="http://cdn.320nle.com/wp-content/uploads/2020/10/1603153540-f165e13e2c19603.jpg" alt="" srcset="http://cdn.320nle.com/wp-content/uploads/2020/10/1603153540-f165e13e2c19603.jpg" title="" style="">

注意兩點

1. ripro 文章圖片的類用 .article-content img比較好，通用。而源代碼中的類就指這一張圖片了。
2. 另外就是添加<a> 標籤所指的鏈接。一般情況應該是 src，但是ripro 這裡應該用srcset。因為 src 屬性指向的是別的鏈接。

已知問題

點擊圖片縮回後，圖片會消失

點擊圖片縮回後，圖片會消失解決

雖然上文章我們沒有選擇 src屬性，而是選擇了srcset，但是圖片點開後，srcset屬性會消失。這個時候js代碼就不起作用了，所以縮回後圖片就消失了。

因為src屬性的值被替換是因為 ripro 的延遲加載（懶加載lazy load）的作用，那我也只能忍痛關閉圖片的懶加載了。

然後代碼改為

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

Hey，你好哇。
影視剪輯 | AE | Pr | 電腦技術 | 攝影攝像 | 電影 | 電視劇 | 二次元
關於變革的力量