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="">
注意兩點
- ripro 文章圖片的類用
.article-content img
比較好,通用。而源代碼中的類就指這一張圖片了。 - 另外就是添加
<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 | 電腦技術 | 攝影攝像 | 電影 | 電視劇 | 二次元
關於變革的力量
320印象 » Ripro 主題燈箱設置,默認鏈接文件到無怎麼辦?解決ripro圖片點擊放大問題