图片灯箱2023.7.8最新教程
qian 10月前

前言

图片灯箱 使用的是 fancybox 方法

 

教程

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

 

把这个 代码放在 文件夹 网站根目录>view>htm>header.inc.htm 文件夹下  看下图

 

 

然后复制下面这个代码 我是放在目录 网站根目录>view>htm>footer.inc.htm 下面

<script>
	$(".message img").each(function() {
		var currentImage = $(this);
		currentImage.wrap("<a href='" + currentImage.attr("src") + "' data-fancybox='lightbox' data-caption='" + currentImage.attr("alt") + "'></a>");
	});
</script>

 

你可以选择放在你认为合适的位置 看图

 

放完之后就ok了

结束

保存,强刷网页,没有效果清除tmp目录缓存,在刷新网页就可以使用了,代码99%不用改动。我看大多数图片都是在.message下面 over over

 

2023.7.18—bug 

如果使用表情包的话 表情包也会被当作图片,可以点击。如果你不嫌弃,就不用改了!

解决办法

如果你越看越麻烦,就这样改!

找到之前放代码的地方 把 message 改成 card-thread 看图

有bug评论,会解决就帮助解决了!

最后于 9月前 被qian编辑 ,原因: 改bug
最新回复 (11)
全部楼主
  • qian 楼主
    10月前 2
    0
    效果和 这个站点差不多,但不是 有白边包围那种效果!!!
  • xiaobai
    10月前 3
    0
    顶顶顶顶顶顶顶!!!
  • AJuYu
    10月前 4
    0
    有点问题,就是把所有的图片都获取出来了,包括头像,表情,而不是只有文章图片。
  • CF
    9月前 5
    0
    AJuYu 有点问题,就是把所有的图片都获取出来了,包括头像,表情,而不是只有文章图片。
    我弄成了插件,只显示文章图片
    https://cloudatabases.com/thread-209.htm
  • qian 楼主
    9月前 6
    0
    AJuYu 有点问题,就是把所有的图片都获取出来了,包括头像,表情,而不是只有文章图片。
    我是基于默认主题的,评论头像是获取不到的,我没有用表情,这个没测试
  • qian 楼主
    9月前 7
    0
    CF 我弄成了插件,只显示文章图片 https://cloudatabases.com/thread-209.htm
    我测了一下 表情包 也会当作图片,我改了下代码,你看看
  • qian 楼主
    9月前 8
    0
    AJuYu 有点问题,就是把所有的图片都获取出来了,包括头像,表情,而不是只有文章图片。
    bug已改,看帖子下面
  • CF
    9月前 9
    0
    qian 我测了一下 表情包 也会当作图片,我改了下代码,你看看
    哦,我这个只是适应我网站的环境,所以针对各种主题得自己做一下适配
  • 2670459508
    9月前 10
    0
    面对如此强贴,论遇到多大阻力,只要我一息上尚存,就绝不会让它沉沦下去,这一点请楼主放心。 
  • yexiuhhd
    9月前 11
    0
    楼主,你写得实在是太好了
  • hitok
    3月前 12
    0

    不知道这个viewer.js有没有办法实现,效果更好,可以放大缩小,还能翻转

    http://fengyuanchen.github.io/viewer/

返回
qian
一级用户组
1
主题数
51
帖子数

  作者最近主题   
  图片灯箱2023.7.8最新教程
扫码访问