[Share Experiences] 使用油猴将论坛中的图片查看功能全面改造
Tofloor
poster avatar
Maicss
deepin
2022-01-01 05:18
Author

论坛中查看图片的功能我想大家都懒得吐槽了,今天发现一个很好用的开源js图片查看器,于是利用油猴脚本将其迁移到本论坛中。

脚本代码:

// ==UserScript==
// @name         深度科技社区 图片查看器优化
// @namespace    https://maicss.gitee.io
// @version      0.1
// @description  将深度社区帖子中查看图片的功能优化,让其具有放大缩小等功能。
// @author       Maicss
// @match        https://bbs.deepin.org*/post/*
// @icon         https://bbs.deepin.org/favicon.ico
// @grant        none
// ==/UserScript==
(function () {
    'use strict';
    var timer = window.setInterval(function () {
        var imgs = document.getElementsByClassName("post_edit")[0].getElementsByTagName("img");
        for (var i = 0; i

使用方法

首先下载浏览器插件:https://www.tampermonkey.net/index.php

根据浏览器不同,自行安装。

image.png

然后点击该插件按钮,选择添加新脚本:

image.png

将脚本复制进去,按Ctrl+S保存即可。

后可以根据需求在右上角插件位置打开和关闭。

效果图

录屏_选择区域_20211231211445.gif

使用的开源图片查看器主页:

https://fengyuanchen.github.io/viewerjs/

Reply Favorite View the author
All Replies
Maicss
deepin
2022-01-01 05:28
#1

前端不太行,写的有点烂,希望有时间的大佬可以来完善一下~tail

目前点完图片后会置顶,不清楚导致的原因😑

Reply View the author
BG7ZAG
deepin
2022-01-01 07:18
#2

稍微改了下,滚动还是没法搞定😂

// ==UserScript==
// @name         深度科技社区 图片查看器优化
// @namespace    https://maicss.gitee.io
// @version      0.1
// @description  将深度社区帖子中查看图片的功能优化,让其具有放大缩小等功能。
// @author       Maicss
// @match        https://bbs.deepin.org*/post/*
// @icon         https://bbs.deepin.org/favicon.ico
// @grant        none
// ==/UserScript==
(function () {
    'use strict';

    var imgBox_style = document.createElement('style')
    imgBox_style.innerHTML = ".imgBox {display:none!important;}"
    document.getElementsByTagName("head")[0].appendChild(imgBox_style);

    var viewer_style = document.createElement("link");
    viewer_style.setAttribute('rel', 'stylesheet');
    viewer_style.setAttribute('href', 'https://fengyuanchen.github.io/viewerjs/css/viewer.css');
    document.getElementsByTagName("head")[0].appendChild(viewer_style);

    var viewerjs = document.createElement("script");
    viewerjs.setAttribute("src", "https://fengyuanchen.github.io/viewerjs/js/viewer.js");
    document.getElementsByTagName("head")[0].appendChild(viewerjs);

    const timer = () => {
        setTimeout(function () {
            if (!Viewer) {
                timer()
                return
            }
            console.log(111)
            const imgs = document.getElementsByClassName('post_edit')[0].querySelectorAll('img')
            for (const i of imgs) {
                const viewer = new Viewer(i, {
                    focus: false,
                    inline: false,
                    navbar: false,
                });

            }
        }, 500);
    }
    timer()

})();
Reply View the author
thepoy
deepin
2022-01-02 06:12
#3

给你加上点图片和部分字体的排版样式美化:

(function () {
    'use strict';

    var new_style = document.createElement('style')
    new_style.innerHTML = `.imgBox {display:none!important;}
    .content img:not(.emoji), .vditor-reset img:not(.emoji){display: block;
box-shadow: 0px 8px 16px 1px hsla(0, 0%, 0%, 0.3);
border-radius: 5px;
margin: 3rem auto;
max-width: 95% !important;
image-orientation: from-image;}
.content h1, .vditor-reset  h1 {
text-align: center;
font-family: serif !important;
font-size: 2.5em !important;
font-weight: 900 !important;
margin-top: 1.5em !important;
}
.content code, .vditor-reset code {
font-family: "Courier", Monaco, Consolas,"Liberation Mono",Menlo,Courier,monospace,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Segoe UI Symbol","Android Emoji","EmojiSymbols" !important;
}
    `
    document.getElementsByTagName("head")[0].appendChild(new_style);

    var viewer_style = document.createElement("link");
    viewer_style.setAttribute('rel', 'stylesheet');
    viewer_style.setAttribute('href', 'https://cdn.jsdelivr.net/gh/fengyuanchen/viewerjs/dist/viewer.min.css');
    document.getElementsByTagName("head")[0].appendChild(viewer_style);

    var viewerjs = document.createElement("script");
    viewerjs.setAttribute("src", "https://cdn.jsdelivr.net/gh/fengyuanchen/viewerjs/dist/viewer.min.js");
    document.getElementsByTagName("head")[0].appendChild(viewerjs);

    const timer = () => {
        setTimeout(function () {
            if (!Viewer) {
                timer()
                return
            }

            const imgs = document.getElementsByClassName('post_edit')[0].querySelectorAll('img')
            for (const i of imgs) {
                const viewer = new Viewer(i, {
                    focus: false,
                    inline: false,
                    navbar: false,
                });

            }
        }, 500);
    }
    timer()

})();
Reply View the author
Maicss
deepin
2022-01-02 16:45
#4
BG7ZAG

稍微改了下,滚动还是没法搞定😂

// ==UserScript==
// @name         深度科技社区 图片查看器优化
// @namespace    https://maicss.gitee.io
// @version      0.1
// @description  将深度社区帖子中查看图片的功能优化,让其具有放大缩小等功能。
// @author       Maicss
// @match        https://bbs.deepin.org*/post/*
// @icon         https://bbs.deepin.org/favicon.ico
// @grant        none
// ==/UserScript==
(function () {
    'use strict';

    var imgBox_style = document.createElement('style')
    imgBox_style.innerHTML = ".imgBox {display:none!important;}"
    document.getElementsByTagName("head")[0].appendChild(imgBox_style);

    var viewer_style = document.createElement("link");
    viewer_style.setAttribute('rel', 'stylesheet');
    viewer_style.setAttribute('href', 'https://fengyuanchen.github.io/viewerjs/css/viewer.css');
    document.getElementsByTagName("head")[0].appendChild(viewer_style);

    var viewerjs = document.createElement("script");
    viewerjs.setAttribute("src", "https://fengyuanchen.github.io/viewerjs/js/viewer.js");
    document.getElementsByTagName("head")[0].appendChild(viewerjs);

    const timer = () => {
        setTimeout(function () {
            if (!Viewer) {
                timer()
                return
            }
            console.log(111)
            const imgs = document.getElementsByClassName('post_edit')[0].querySelectorAll('img')
            for (const i of imgs) {
                const viewer = new Viewer(i, {
                    focus: false,
                    inline: false,
                    navbar: false,
                });

            }
        }, 500);
    }
    timer()

})();

这个感觉有时候会失灵啊,点击没反映,得刷新几次

Reply View the author
BG7ZAG
deepin
2022-01-04 17:17
#5
Maicss

这个感觉有时候会失灵啊,点击没反映,得刷新几次

应该是挂载dom慢了吧

Reply View the author