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

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

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

小貼士
燈箱(Lightbox)效果是將圖片放大彈出顯示,並將背景變暗,以突出圖片。

 

在查閱 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 | 電腦技術 | 攝影攝像 | 電影 | 電視劇 | 二次元
關於變革的力量

 

 

 

 

收集的所有資源均來自網絡,僅供私下交流學習之用,任何涉及到商業目的的均不能使用,否則產生的一切後果由您自行承擔,提供資源但是不對任何資源負法律責任,所有資源請在你下載後24小時刪除。 如有侵權,聯繫 admin#mail.320nle.com
320印象 » Ripro 主題燈箱設置,默認鏈接文件到無怎麼辦?解決ripro圖片點擊放大問題

發表評論