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图片点击放大问题

发表评论