登录 立即注册

首页 > 绿虎论坛 > 网页插件 (发帖)

标题: [精][网插]图片预览器

作者: @Ta

时间: 2022-06-22发布,2022-06-22修改

点击: 47962

代替目前林子的新窗口查看图片,可以之间在当前页面进行图片预览。

支持图片旋转、放大缩小和反转等。

be187406-4867-462d-a9dc-7bec0f2575f3.gif

对于帖子或回复里有多图的,支持之间切换查看图片,方便查看多图的“技术帖”。

7724d3a8-11c2-40d4-9e3f-ab76f54e8a40.gif

导入网页插件:viewer图片预览(当前用户:24,总安装次数:30)
<link rel="stylesheet" href="https://hu60.cn/q.php/api.webplug-file.11051_public_viewer-css.css" />
<script src="https://hu60.cn/q.php/api.webplug-file.11051_public_viewer-js.js" defer></script>
<script src="https://hu60.cn/q.php/api.webplug-file.11051_public_viewer.js" defer></script>

[隐藏样式|查看源码]


『回复列表(20|显示机器人聊天)』

1.

@读书顶个鸟用,js重复了两次

哦,两个不一样啊

(/@Ta/2022-06-22 10:41//)

2.
是的,不一样的。一个是Viewer原本的JS,一个是调用Viewer的JS
(/@Ta/2022-06-22 10:46//)

3.

一些没有操作DOM的JS外链(页面功能增强的代码)可以加上defer来避免减缓页面首次渲染速度,带有defer的js会延迟到DOM解析完成之后,但是在DOMContentLoaded事件触发之前执行,同时会严格按照书写顺序执行(不会破坏依赖关系)。
红米K30 Pro(变焦版)

(/@Ta/2022-06-22 11:05//)

4.

@Curtion,GET,我调整下

(/@Ta/2022-06-22 11:08//)

5.
老虎牌手机,祝大家每天激情不断。(尊贵基佬版)
(/@Ta/2022-06-22 16:30//)

6. 测试图片,测试预览[code]
已测试,图片留空
(/@Ta/2022-06-22 18:36//)

7. 我拿到博客里面可以直接用吗?
(/@Ta/2022-06-22 23:48//)

8.

@ponyoung,应该是可以的

(/@Ta/2022-06-23 08:31//)

9.
我点表情的时候也会弹出来预览……
(/@Ta/2022-06-23 09:15//)

11.

@姜辰,确实,点击网页插件添加的表情列表也会触发预览。

(/@Ta/2022-06-23 09:52//)

13.

@读书顶个鸟用,改成这样比较好,修复了无关图片(比如顶部Logo、网页插件添加的图片)触发预览的问题:

$(document).ready(function () {
    document.querySelectorAll('.userimg, .userthumb').forEach(img => (img.onclick = function () {
        // 链接中的图片不预览
        if (0 !== $(this).parents('a').length) return;

        let elem = $(this).parents('.user-content');
        elem = elem.length > 0 ? elem[0] : this;
        let viewer = new Viewer(elem, {
            hidden: () => viewer.destroy(),
            filter(image) {
                return image.matches('.userimg, .userthumb');
            }
        });

        viewer.show()
    }));
});
(/@Ta/2022-06-23 10:01//)

14.

@老虎会游泳,OK已调整

(/@Ta/2022-06-23 09:58//)

15.

@读书顶个鸟用,过滤器这样写可能更简单,13楼已更新:

filter(image) {
    return image.matches('.userimg, .userthumb');
}
(/@Ta/2022-06-23 10:03//)

16.

@老虎会游泳 已改,测试正常

(/@Ta/2022-06-23 10:15//)

17.
小米MIX2s(白)
(/@Ta/2022-06-23 10:28//)

18.

@老虎会游泳@读书顶个鸟用,为嘛我不能浏览下一张?明明帖子里图片很多的
image.png

(/@Ta/2022-06-23 10:34//)

19.

@无名啊,代码限制为只获取当前楼层。你可以让@读书顶个鸟用

let elem = $(this).parents('.user-content');
elem = elem.length > 0 ? elem[0] : this;

改成

let elem = document.querySelector('body');

这样就能获取所有图片了。

注意,网页插件外链有5分钟缓存,修改后要等一段时间或者清除浏览器缓存才能生效。

(/@Ta/2022-06-23 10:42//)

20.

@无名啊,已更新

(/@Ta/2022-06-23 10:43//)

21.
@老虎会游泳,大佬厉害,已解决
(/@Ta/2022-06-23 10:56//)

下一页 1/2页,共20楼

回复需要登录

5月12日 21:48 星期天

本站由hu60wap6华为CPU驱动

备案号: 京ICP备18041936号-1