圖片全載-FancyboxV5

支持寫真、H漫、漫畫的網站1000+,圖片全量加載,簡易的看圖功能,漫畫無限滾動閱讀模式,下載壓縮打包,如有下一頁元素可自動化下載。

< Feedback op 圖片全載-FancyboxV5

Recensie: Goed - het script werkt zoals het hoort

§
Geplaatst: 23-03-2024

脚本很强,很大,很广,先给一个赞。
可是查看图片界面,滚轮能否支持放大和缩小,其实界面左右两边已经有上下一张图片的快捷按钮了,滚轮应该设置成放大和缩小感觉才好,你觉得呢。
接着有一个请求,图片查看功能界面很强很好,能否独自制作一个单纯的图片查看脚本,方便查看其他网站的图片?再一次好评给予!

tony0809Maker
§
Geplaatst: 23-03-2024
可是查看图片界面,滚轮能否支持放大和缩小,其实界面左右两边已经有上下一张图片的快捷按钮了,滚轮应该设置成放大和缩小感觉才好,你觉得呢。

我比较偏向滚轮切换图片

你可以自己修改脚本

wheel: "slide",

改成

wheel: "zoom",

接着有一个请求,图片查看功能界面很强很好,能否独自制作一个单纯的图片查看脚本,方便查看其他网站的图片?再一次好评给予!

@match 可以修改成需要支持的网站
点击的是图片链结会被拦截成展示图片,浏览器需要有拖拽开启链结的功能,不然无法正常点开网页。

// ==UserScript==
// @name               FancyboxV5
// @version            0.0.1
// @description        FancyboxV5 Load all images。
// @author             tony0809
// @match              *://*/*
// @connect            *
// @license            MIT
// @namespace          https://greasyfork.org/users/20361
// @grant              GM_addStyle
// @grant              GM_getResourceText
// @grant              unsafeWindow
// @noframes
// @require            https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0.35/dist/fancybox/fancybox.umd.js
// @resource fancyboxCss https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0.35/dist/fancybox/fancybox.css
// ==/UserScript==

(() => {
    'use strict';

    const fancyboxCss = GM_getResourceText("fancyboxCss") +
        `
.fancybox-container,.fancybox__container {
    z-index: 2147483647 !important;
}

.fancybox-image {
    opacity: 1 !important;
}

.fancybox-infobar *,.fancybox__infobar,a[data-fancybox-download],a[data-fancybox-download]:hover,a[data-fancybox-download]:link,a[data-fancybox-download]:visited,a[data-fancybox-download]:active {
    color: white;
}
`;
    GM_addStyle(fancyboxCss);

    const setFancybox = () => {
        [...document.querySelectorAll("img:not([data-fancybox])")].forEach(img => {
            img.setAttribute("data-fancybox", "gallery");
        });
        Fancybox.bind("[data-fancybox]", {
            idle: false,
            wheel: "zoom",
            Images: {
                Panzoom: {
                    maxScale: 2
                }
            },
            Thumbs: {
                showOnStart: false
            },
            Toolbar: {
                display: {
                    left: ["infobar"],
                    middle: ["iterateZoom", "toggle1to1", "rotateCCW", "rotateCW", "flipX", "flipY", "fitX", "fitY", "reset"],
                    right: ["download", "slideshow", "fullscreen", "thumbs", "close"]
                }
            }
        });
    }
    setFancybox();

    const MutationObserverConfig = {
        childList: true,
        subtree: true
    };
    new MutationObserver(setFancybox).observe(document.body, MutationObserverConfig);

})();
tony0809Maker
§
Geplaatst: 24-03-2024
滚轮能否支持放大和缩小

1.11.5 已更新

脚本管理器菜单勾选FancyboxV5滚轮图片缩放

§
Geplaatst: 24-03-2024

好的,这两个方案我满足了,辛苦了,多谢

tony0809Maker
§
Geplaatst: 24-03-2024

好的,這兩個方案我滿足了,辛苦了,多謝

更新代碼

// ==UserScript==
// @name                 FancyboxV5
// @version              0.0.2
// @description          FancyboxV5 Load All Images。
// @author               tony0809
// @match                http://*/*
// @match                https://*/*
// @license              MIT
// @namespace            https://greasyfork.org/users/20361
// @grant                GM_addStyle
// @grant                GM_getResourceText
// @grant                unsafeWindow
// @require              https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0.35/dist/fancybox/fancybox.umd.js
// @resource fancyboxCss https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0.35/dist/fancybox/fancybox.css
// ==/UserScript==

/*
@match 請自行修改成自己要使用的網站
@match https://網站1/*
@match https://網站2/*

備註:點擊的是圖片鏈結會被攔截成展示圖片,瀏覽器需要有拖曳開啟鏈結的功能,不然無法正常點開網頁。

Fancybox 官方文檔
https://fancyapps.com/fancybox/
*/

(() => {
    'use strict';

    const _unsafeWindow = typeof unsafeWindow === "undefined" ? window : unsafeWindow;
    const hasTouchEvents = (() => ("ontouchstart" in _unsafeWindow) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0) ? true : false)();

    const fancyboxCss = GM_getResourceText("fancyboxCss") +
        `
.fancybox-container,.fancybox__container {
    z-index: 2147483647 !important;
}

.fancybox-image {
    opacity: 1 !important;
}

.fancybox-infobar *,.fancybox__infobar,a[data-fancybox-download],a[data-fancybox-download]:hover,a[data-fancybox-download]:link,a[data-fancybox-download]:visited,a[data-fancybox-download]:active {
    color: white;
}
`;
    GM_addStyle(fancyboxCss);

    let FancyboxOptions = {};

    if (hasTouchEvents) {
        FancyboxOptions = { //移動裝置自訂Fancybox選項
            Images: {
                Panzoom: {
                    maxScale: 2
                }
            },
            Thumbs: {
                showOnStart: false
            },
            Toolbar: {
                display: {
                    left: ["infobar"],
                    middle: ["flipX", "flipY"],
                    right: ["iterateZoom", "slideshow", "thumbs", "close"]
                }
            }
        };
    } else {
        FancyboxOptions = { //PC自訂Fancybox選項
            wheel: "slide", //"slide",滾輪切換圖片 | "zoom",滾輪切換縮放等級
            Images: {
                Panzoom: {
                    maxScale: 2 //圖片縮放最大倍率
                }
            },
            Thumbs: {
                showOnStart: false //true,打開Fancybox後立即展示Thumbs列 | false,手動點Thumbs按鈕後才展開
            },
            Toolbar: {
                display: {
                    left: ["infobar"],
                    middle: ["iterateZoom", "toggle1to1", "rotateCCW", "rotateCW", "flipX", "flipY", "fitX", "fitY", "reset"],
                    right: ["download", "slideshow", "fullscreen", "thumbs", "close"]
                }
            }
        };
    }

    const setFancybox = () => {
        let num = 0;
        const imgElements = [...document.querySelectorAll("img:not([data-fancybox])")]; //選取所有不含data-fancybox屬性的圖片元素
        if (imgElements.length > 0) {
            imgElements.forEach(img => { //遍歷圖片元素
                if (!img?.parentElement?.getAttribute("data-fancybox")) { //判斷圖片父元素不含data-fancybox屬性
                    num += 1;
                    img.setAttribute("data-fancybox", "gallery"); //圖片添加data-fancybox屬性
                }
            });
        }
        if (num > 0) {
            Fancybox.bind("[data-fancybox]", FancyboxOptions); //選取所有含data-fancybox屬性的元素,放入Fancybox展示容器。
        }
    };
    setFancybox();

    const ContentContainer = document.body;
    const MutationObserverConfig = {
        childList: true,
        subtree: true
    };
    const Observer = new MutationObserver(setFancybox);
    Observer.observe(ContentContainer, MutationObserverConfig);

})();
§
Geplaatst: 25-03-2024

收到!已装备且修改,但是图片查看有些大,靠近显示屏某些大图感觉太大了,能否添加上缩小功能,这个代码我是不会写的,鼠标滚轮放大缩小体验感才好,其实原脚本我就想说了,哈哈有些迟钝的尴尬,再次谢谢了,用心辛苦了

tony0809Maker
§
Geplaatst: 25-03-2024

收到!已装备且修改,但是图片查看有些大,靠近显示屏某些大图感觉太大了,能否添加上缩小功能,这个代码我是不会写的,鼠标滚轮放大缩小体验感才好,其实原脚本我就想说了,哈哈有些迟钝的尴尬,再次谢谢了,用心辛苦了

我看了Fancybox文档没有提到有缩小的功能,图片展示会自动缩小超出窗口的图片,使其符合窗口大小。

所以我也没办法,我也只是透过脚本引入Fancybox功能而已,而且Fancybox也不是能完美适配所有网站的,可能存在样式冲突的问题。

建议试用看看以下两个脚本

Picviewer CE+
https://greasyfork.org/scripts/24204

ComicRead 简易模式
https://greasyfork.org/scripts/374903

§
Geplaatst: 25-03-2024

好的,我以为是你写的源码,picviewer我用过,它的界面太专业化,不够简易,感觉有点臃肿,我比较喜欢你的fancybox和另一家的viewer,
我把网址发给你,看看对你的仓库有没有帮助。
GreasyFork优化
https://greasyfork.org/zh-CN/scripts/475722-greasyfork%E4%BC%98%E5%8C%96
它引用的图片查看脚本viewer
https://greasyfork.org/zh-CN/scripts/449471-viewer

§
Geplaatst: 25-03-2024

其实昨晚我尝试模仿你的代码形式建立viewer脚本,但是毕竟我不太会脚本编写,只会修改一些固定代码数字,所以没能成功,哈哈

§
Geplaatst: 25-03-2024

我再给你发两个网站引用的比较好用的图片viewer
https://www.52pojie.cn/thread-1904971-1-1.html
https://www.bdys10.com/meiju/24619.htm

tony0809Maker
§
Geplaatst: 25-03-2024
Bijgewerkt: 25-03-2024

jsDelivr
Viewer Js 10万+引用
Fancybox 亿+引用

青菜萝卜各有所好,Fancybox调用起来非常简单不烧脑,Viewer Js需要有空再研究看看,初步看画廊模式可能无法支持动态加载,例如自动翻页、加载更多、SPA,需要写成单图模式。

Viewer Js
https://fengyuanchen.github.io/viewerjs/
https://github.com/fengyuanchen/viewerjs

§
Geplaatst: 25-03-2024

你说的没错,我也只是见到了一些viewer然后发给你看看丰富一下你的代码仓库。
你们的图片站脚本专注于浏览,而viewer这个简化于查看,对于日常看见一个或者一组大图简易的查看比较轻便(不是说你的fancybox不好),
比如52pj里的,点一下图片,缩放查看,接着下一张图片,缩放查看,结束了,有时候就这样简易的需求。
picviewer的取图逻辑很专业了,悬浮小按钮,图片过滤。但是界面的逻辑总刺挠着我,感觉像木板围起来的篱笆,总感觉有些臃肿有些不顺畅。
现在的浏览器包括插件对图片查看都不提供或者不专业,我找过一段时间,图片分辨率日渐增高的年代,看图的需求没有一个浏览器看到的。

tony0809Maker
§
Geplaatst: 25-03-2024

详细翻了一下文档
https://fancyapps.com/panzoom/api/options/
https://fancyapps.com/fancybox/plugins/toolbar/

 maxScale: 2
 //改成
 maxScale: 2,
 minScale: 0.5
 //增加最小缩放级别
 

 "iterateZoom",
 //改成
 "iterateZoom", "zoomIn", "zoomOut",
 //增加放大缩小按钮
 

还在上班,未实际测试是否可行。

§
Geplaatst: 25-03-2024

有效,只是点开显示是最小的倍率,缩放倍率太大了不够自然。
图标也有。
maxVelocity这个是缩放动画倍率吗?我尝试丢在minscale下边,不管用,哈哈
我觉得这个脚本挺可以了,你可以把这个js发布出来。

§
Geplaatst: 25-03-2024

有效,只是点开显示的是最小的倍率,缩放倍率太大了不够自然。
图标显示了。
maxVelocity这个是缩放动画倍率吗?我尝试丢在minscale的下边,不管用,哈哈
我觉得这个脚本挺可以了,适用性挺大的,真的其实你可以把这个js发布上来给别人用用。
如果说图片超链接有影响的话,可以在油猴菜单里做一个“开启并刷新网页”,“仅开启本次”选项。

tony0809Maker
§
Geplaatst: 25-03-2024

有效,只是点开显示是最小的倍率,缩放倍率太大了不够自然。
图标也有。
maxVelocity这个是缩放动画倍率吗?我尝试丢在minscale下边,不管用,哈哈
我觉得这个脚本挺可以了,你可以把这个js发布出来。

没办法,配置项不完美,脚本就不发了,0.0.3就这样了。

// ==UserScript==
// @name                 FancyboxV5
// @version              0.0.3
// @description          FancyboxV5 Load All Images。
// @author               tony0809
// @match                http://*/*
// @match                https://*/*
// @icon                 https://fancyapps.com//favicon.ico
// @license              MIT
// @namespace            https://greasyfork.org/users/20361
// @grant                GM_addStyle
// @grant                GM_getResourceText
// @grant                unsafeWindow
// @require              https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0.35/dist/fancybox/fancybox.umd.js
// @resource fancyboxCss https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0.35/dist/fancybox/fancybox.css
// ==/UserScript==

/*
@match 請自行修改成自己要使用的網站
@match https://網站1/*
@match https://網站2/*

備註:點擊的是圖片鏈結會被攔截成展示圖片,瀏覽器需要有拖曳開啟鏈結的功能,不然無法正常點開網頁。

Fancybox 官方文檔
https://fancyapps.com/fancybox/
*/

(() => {
    'use strict';

    const _unsafeWindow = typeof unsafeWindow === "undefined" ? window : unsafeWindow;
    const hasTouchEvents = (() => ("ontouchstart" in _unsafeWindow) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0) ? true : false)();

    const fancyboxCss = GM_getResourceText("fancyboxCss") +
        `
.fancybox-container,.fancybox__container {
    z-index: 2147483647 !important;
}

.fancybox-image {
    opacity: 1 !important;
}

.fancybox-infobar *,.fancybox__infobar,a[data-fancybox-download],a[data-fancybox-download]:hover,a[data-fancybox-download]:link,a[data-fancybox-download]:visited,a[data-fancybox-download]:active {
    color: white;
}
`;
    GM_addStyle(fancyboxCss);

    let FancyboxOptions = {};

    if (hasTouchEvents) {
        FancyboxOptions = { //移動裝置自訂Fancybox選項
            Images: {
                Panzoom: {
                    maxScale: 2
                }
            },
            Thumbs: {
                showOnStart: false
            },
            Toolbar: {
                display: {
                    left: ["infobar"],
                    middle: ["flipX", "flipY"],
                    right: ["iterateZoom", "slideshow", "thumbs", "close"]
                }
            }
        };
    } else {
        FancyboxOptions = { //PC自訂Fancybox選項
            wheel: "zoom", //"slide",滾輪切換圖片 | "zoom",滾輪切換縮放等級
            Images: {
                Panzoom: {
                    maxScale: 2, //圖片縮放最大倍率,2、3、4、5
                    minScale: 1 //圖片縮放最小倍率,0.9、0.8、0.7、0.6、0.5,也是展示圖片時的初始縮放大小
                }
            },
            Thumbs: {
                showOnStart: false //true,打開Fancybox後立即展示Thumbs列 | false,手動點Thumbs按鈕後才展開
            },
            Toolbar: {
                display: {
                    left: ["infobar"],
                    middle: ["iterateZoom", "zoomIn", "zoomOut", "toggle1to1", "rotateCCW", "rotateCW", "flipX", "flipY", "fitX", "fitY", "reset"],
                    right: ["download", "slideshow", "fullscreen", "thumbs", "close"]
                }
            }
        };
    }

    const setFancybox = () => {
        let num = 0;
        const imgElements = [...document.querySelectorAll("img:not([data-fancybox])")]; //選取所有不含data-fancybox屬性的圖片元素
        if (imgElements.length > 0) {
            imgElements.forEach(img => { //遍歷圖片元素
                if (!img?.parentElement?.getAttribute("data-fancybox")) { //判斷圖片父元素不含data-fancybox屬性
                    num += 1;
                    img.setAttribute("data-fancybox", "gallery"); //圖片添加data-fancybox屬性
                }
            });
        }
        if (num > 0) {
            Fancybox.bind("[data-fancybox]", FancyboxOptions); //選取所有含data-fancybox屬性的元素,放入Fancybox展示容器。
        }
    };
    setFancybox();

    const ContentContainer = document.body;
    const MutationObserverConfig = {
        childList: true,
        subtree: true
    };
    const Observer = new MutationObserver(setFancybox);
    Observer.observe(ContentContainer, MutationObserverConfig);

})();
tony0809Maker
§
Geplaatst: 25-03-2024
// ==UserScript==
// @name                 ViewerJs
// @version              0.0.1
// @description          ViewerJs Load All Images。
// @author               tony0809
// @match                http://*/*
// @match                https://*/*
// @icon                 https://fengyuanchen.github.io/favicon.ico
// @license              MIT
// @namespace            https://greasyfork.org/users/20361
// @grant                GM_addStyle
// @grant                GM_getResourceText
// @grant                GM_registerMenuCommand
// @grant                unsafeWindow
// @noframes
// @run-at               document-end
// @require              https://cdn.jsdelivr.net/npm/viewerjs@1.11.6/dist/viewer.min.js
// @resource ViewerJsCss https://cdn.jsdelivr.net/npm/viewerjs@1.11.6/dist/viewer.min.css
// ==/UserScript==

/*
@match 請自行修改成自己要使用的網站
@match https://網站1/*
@match https://網站2/*

ViewerJs 官方文檔
https://fengyuanchen.github.io/viewerjs/
https://github.com/fengyuanchen/viewerjs
*/

(() => {
    "use strict";

    const ViewerJsCss = GM_getResourceText("ViewerJsCss");
    GM_addStyle(ViewerJsCss);

    const ViewerJs_ViewMode = localStorage.getItem("ViewerJs_ViewMode") ?? 0; //取得選項值,若無預設為0。

    GM_registerMenuCommand(ViewerJs_ViewMode == 0 ? "❌ 單圖模式" : "✔️ 單圖模式", () => {
        ViewerJs_ViewMode == 0 ? localStorage.setItem("ViewerJs_ViewMode", 1) : localStorage.setItem("ViewerJs_ViewMode", 0); //切換選項值
        location.reload();
    });

    if (ViewerJs_ViewMode == 0) {
        //畫廊模式,無法支持動態加載
        new Viewer(document.body, { //通配document.body,指配document.querySelector("圖片容器選擇器"),每個網站都不一樣。
            url(image) {
                return image.dataset.src || image.dataset.original || image.src;
            }
        });
    } else {
        //單圖模式,支持動態加載
        const setViewerJs = () => {
            const imgElements = [...document.querySelectorAll("img:not([data-viewerjs])")]; //選取所有不含data-viewerjs屬性的圖片元素
            if (imgElements.length > 0) {
                imgElements.forEach(img => { //遍歷圖片元素
                    if (!img?.parentElement?.getAttribute("data-fancybox") && img?.parentElement?.className !== "viewer-canvas") { //判斷圖片父元素不含data-fancybox屬性,和不是ViewerJs的視口容器元素。
                        img.setAttribute("data-viewerjs", "single"); //圖片添加data-viewerjs屬性,標記作用避免重複添加Viewer事件。
                        new Viewer(img, {
                            url(image) {
                                return image.dataset.src || image.dataset.original || image.src;
                            }
                        });
                    }
                });
            }
        };
        setViewerJs();

        const ContentContainer = document.body;
        const MutationObserverConfig = {
            childList: true,
            subtree: true
        };
        const Observer = new MutationObserver(setViewerJs);
        Observer.observe(ContentContainer, MutationObserverConfig);
    }

})();
§
Geplaatst: 26-03-2024

得过且过,先暂时预备用吧,确实不小心点到一些小图标会弹出来查看,预览图里也包含小图。
谢了。

tony0809Maker
§
Geplaatst: 26-03-2024

1.12.0 已更新

增加分页视图使用ViewerJs插件功能,透过脚本管理器菜单开启。

主框架再加ViewerJs功能会逻辑缭绕,所以就不加了,毕竟脚本是围绕Fancybox下去写的,改起来很麻烦。

§
Geplaatst: 26-03-2024

冲突就不勉强加入进去了,这个不强求,我更新看看效果

§
Geplaatst: 27-03-2024

https://www.3gbizhi.com
https://hotgirlchina.com
会丢失油猴菜单,我用了搜狗和edge测试,禁用其余脚本仅剩fancybox测试也是
不知是不是图片多或者网页其他元素未链接加载完全,分页视图常不显示,https://hotgirlchina.com这个比较多

§
Geplaatst: 27-03-2024

小黄书菜单正常,分页视图多失败
小黄书图太多了,不能做成https://hotgirlchina.com这类原图排列吗
50张以上的面页有些许折磨

tony0809Maker
§
Geplaatst: 27-03-2024
丢失油猴菜单

判断顯示菜单nsfw少了1,所以nsfw1的类别都没显示,小黄书是nsfw2,之后会修复。

这类原图排列吗

不懂你的意思,是分页视图的排列吗,就3种排列方式没了,左下有菜单鼠标移过去触发,一开始写是直接显示的,后来感觉碍眼就缩起来了,移动装置依然直接显示,也能0、1、2切换,每个网站分别记忆。

分页视图多失败,50张以上的面页有些许折磨

因为用了ViewerJs,只要一展开ViewerJs画廊就会卡很久,这是因为ViewerJs没有Lazy load功能,只要展开等于要求所有图片同时载入,因为ViewerJs需要取得图片宽高属性值来生成标题, 所以只要图一多就呵呵,写成单图模式就没有画廊切换图片功能了。

§
Geplaatst: 27-03-2024

嗯viewerJs这个没关系吧,有替换选择,用不了还是可以回拉fancybox。
原图排列比如https://www.3gbizhi.com<>https://hotgirlchina.com
它在网页内读取多页图片并排列显示(一组20p在网页就加载20p)
而小黄书读取多页后在原位置有一组,fancybox在下方又生成一组(直白描述是:一个100p的组图会加载200p图)
小黄书组图多是几十近百张以上的,这类布局方式很影响体验

tony0809Maker
§
Geplaatst: 27-03-2024

懂意思了,有一些规则是写成缩略图和原图我全都要的概念,小黄书的写法是先取得所有缩略图放入当前网页后,再直接取缩略图地址改成原图地址,这个过程会导致网页先载入所有缩略图,导致原图加载往后排,拖慢原图的加载速度,之后有空我会再改写成XHR取源码的方式,这样就不会有没意义的缩略图加载。

Fancybox下方的就是用缩略图地址,没有缩略图就是用原图地址,缩略图的展示只会载入进入窗口可视范围的部份,V5不会展开后直接就全部载入,这就是跟ViewerJs不一样的地方。

分页视图使用ViewerJs可以改成网站分别记忆的方式,折中图少用ViewerJs图多用Fancybox。

§
Geplaatst: 27-03-2024

分页视图可以多样浏览这样的功能其实挺完美的,不局限于一个看图样式。
刚刚测viewerjs,对比了一下greasyfork优化作者,好像感觉greasyfork优化作者加入了平滑缩放的效果,是不是。
然后发现fancybox-v3版只能查看网页本来展示的原图,而网页是略缩图的直接无法查看。
viewrjs-v1版只能查看略缩图。
啊哈哈,忽然感觉网页代码角度真刁钻。

§
Geplaatst: 27-03-2024

cdn.bootcdn.net这个是怎么打开的,不能直接浏览js格式吗?
我把jsdelivr替换成bootcdn,打不开js地址,

§
Geplaatst: 27-03-2024

是不是你没有把你的js传到cdn.bootcdn.net
我把你主页介绍的cdn.bootcdn.net替换了fancybox全载的jsdelivr链接,一个也没有成功
我家访问cdn.bootcdn.net真快,jsdelivr的地址有时候会抽风

§
Geplaatst: 27-03-2024
Bijgewerkt: 27-03-2024

不对,是我直接把cdn.jsdelivr.net替换了,没有留意ajax/libs/文件夹位置

§
Geplaatst: 27-03-2024

还是大意了,版本号也不同。。
对了
关于这个@require
它是不是加载一次保存在本地就完成了,不用每次网页都会请求一次服务器下载吧?

tony0809Maker
§
Geplaatst: 27-03-2024

@require只需加载一次之后就离线了,沙盒运行可绕过CSP限制。
@resource也一样,但只是能离线源码,后续使用需要用eval()或注入页面来使用。
刚刚试了把源码全部离线化,开新分页视图很丝滑顺畅。

至于引用的源码都是用官方的,bootcdn不知道怎么就最终版本号比jsdelivr来的低。

虽然也不是版本号越高越好,昨天才发现Fancybox 5.0.31之后版本有BUG,空白页关闭Fancybox时会维持画廊索引,有机率自动刷新页面。

§
Geplaatst: 27-03-2024

开新分页视图很丝滑顺畅。这句话光听到就很开心,脚本能力忽然更上一层楼。
至于源码,源码公开不是可以引用修改嘛,自己丢仓库没有人来怪罪。
我估摸5.0.31后那个作者都是随意维护的了,

tony0809Maker
§
Geplaatst: 27-03-2024

1.12.1 已更新

1.修复丢失油猴菜单
2.网站分别记忆是否使用ViewerJs
3.原码初始加载一次后脱机化
4.改写小黄书规则

§
Geplaatst: 28-03-2024
Bijgewerkt: 28-03-2024

优化了顺畅了很多,你帮我写的那个viewerjs-v1版本,能不能在单图模式下也能切换下一张?可以写吗?
我把viewerjs的代码数字改成默认初始单图模式了,有点成就感的。想在不看到略缩小图的状态下偶尔也可以利用一下左右切换。
那个小黄书我在edge测试了,挺顺畅的,但可能对于老内核浏览器不适应,只能刷出19张图,提示“圖片數量不符合,請反饋”,某些贴偶尔还提示:"用来定位插入的元素不存在"
反正最多只能刷出19张图。有可能也是我油猴版本低的原因,4.16.1版本。可以不用改了,因为我也不怎么看。
其他我测试了几个网站包括漫画,没有发现bug。
还有,那个4khd跳转到了https://ccork.xxtt.info/,这个网址你没有收录。

§
Geplaatst: 28-03-2024

应该说我不怎么喜欢看美颜的图,不真实,有点做作,比较倾向于素颜自然的,要么直接看movie,直接。

§
Geplaatst: 28-03-2024
Bijgewerkt: 28-03-2024
§
Geplaatst: 28-03-2024

分享给你一个超好用的超链接转文本js,看看你有没有,gf上找到的最好用的,鼠标点击链接附近立马变成超链接,非常省心好用
https://greasyfork.org/zh-CN/scripts/422773-%E9%93%BE%E6%8E%A5%E5%8A%A9%E6%89%8B

tony0809Maker
§
Geplaatst: 28-03-2024
Bijgewerkt: 28-03-2024
能不能在单图模式下也能切换下一张?

没办法,切换必需是画廊模式,new viewer加在主容器,会自动识别主容器下的所有图片形成一个画廊,所以你应该用画廊模式指定主容器。
单图模式是把new viewer加在每个图片IMG上面。

范例
let contentContainerSelector = "body"; //宣告主容器选择器变量

//不同的网站使用该网站的主容器
if (location.hostname === "网站域名") {
    contentContainerSelector = "#content";
} else if (location.hostname === "网站域名2") {
    contentContainerSelector = ".entry-content";
}

new Viewer(document.querySelector(contentContainerSelector) ?? document.body, {
    url(image) {
        return image.dataset.src || image.dataset.original || image.src;
    }
});

还有,那个4khd跳转到了https://ccork.xxtt.info/,这个网址你没有收录。

4KHD不对域名做识别,是对元素文本和网站路径做识别,即便域名变换一样能正常识别是不是4KHD。

§
Geplaatst: 28-03-2024
没办法,切换必需是画廊模式,new viewer加在主容器,会自动识别主容器下的所有图片形成一个画廊,所以你应该用画廊模式指定主容器。
单图模式是把new viewer加在每个图片IMG上面。

这么就不管它了,
果然还是老浏览器内核的原因,在edge上可以识别ccork,在搜狗浏览器上替换成ccork,才有反应,但仅反应一下卡在读取下一页处,这个也不管了,新内核正常看即ok了。

§
Geplaatst: 28-04-2024
能不能在单图模式下也能切换下一张?

没办法,切换必需是画廊模式,new viewer加在主容器,会自动识别主容器下的所有图片形成一个画廊,所以你应该用画廊模式指定主容器。
单图模式是把new viewer加在每个图片IMG上面。

范例
let contentContainerSelector = "body"; //宣告主容器选择器变量

//不同的网站使用该网站的主容器
if (location.hostname === "网站域名") {
    contentContainerSelector = "#content";
} else if (location.hostname === "网站域名2") {
    contentContainerSelector = ".entry-content";
}

new Viewer(document.querySelector(contentContainerSelector) ?? document.body, {
    url(image) {
        return image.dataset.src || image.dataset.original || image.src;
    }
});

还有,那个4khd跳转到了https://ccork.xxtt.info/,这个网址你没有收录。

4KHD不对域名做识别,是对元素文本和网站路径做识别,即便域名变换一样能正常识别是不是4KHD。

向大佬致敬,我也写了一个看图的js插件,看了源码发现是通过css选择器来进行识别的,那如果不同网站比如pica.compicb.com都匹配到了,如何确定是否pica还是picb

tony0809Maker
§
Geplaatst: 28-04-2024

向大佬致敬,我也写了一个看图的js插件,看了源码发现是通过css选择器来进行识别的,那如果不同网站比如pica.compicb.com都匹配到了,如何确定是否pica还是picb

// 判断网址和页面元素的范例
const ge = (selector) => {
    if (/^\//.test(selector)) {
        return document.evaluate(selector, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    } else {
        return document.querySelector(selector);
    }
};

let check = false;
check = /reg/.test(location.href);

let includeSelector;
includeSelector = "includeSelector";
includeSelector = [
    "includeSelectorA",
    "includeSelectorB",
    "includeSelectorC"
];

if (Array.isArray(includeSelector)) {
    let checkElements = includeSelector.map((selector) => ge(selector)); //生成一个元素数组
    let checkItems = checkEles.filter(item => item); //筛掉null
    if (checkItems.length/*筛掉后的数组数*/ === 0) {
        //页面没有任何数组选择器中必须包含的元素
        return; //回圈用continue;跳过
    } else if (checkElements.length/*元素数组数*/ != checkItems.length/*筛掉后的数组数*/) {
        //页面缺少数组选择器中必须包含的元素
        return; //回圈用continue;跳过
    }
} else {
    check = !!ge("includeSelector"); // 有元素true没元素false
}

let excludeSelector = "excludeSelector";
check = !ge("excludeSelector"); // 有元素false没元素true

if (!check) { //未通过检查
    return; //回圈用continue;
}

if (check) {
    //code
    //回圈用break;跳出
} 

你的问题pica.com和picb.com的匹配如果只是过正则判断网址,都匹配到了。
那还要区分pica.com和picb.com,就需判断元素或字符串,字符串用Xpath。

pica.com
/pica.com/.test(location.href) && ge("selector") && ge("//title[contains(text(),'pica.com')]")

picb.com
/picb.com/.test(location.href) && ge("selector") && ge("//title[contains(text(),'picb.com')]")

例如极品性感美女经常换域名,正则只写location.pathname的部分,再用Xpath判断关键元素和字符串
/\/\w+\/\w+\.html$/.test(location.href) && ge("//div[@class='toptip']/a[text()='极品性感美女']")

回圈for判断json数组物件[{},{}],你可以参考脚本2.0.0的第22001~22320行

§
Geplaatst: 28-04-2024

向大佬致敬,我也写了一个看图的js插件,看了源码发现是通过css选择器来进行识别的,那如果不同网站比如pica.compicb.com都匹配到了,如何确定是否pica还是picb

// 判断网址和页面元素的范例
const ge = (selector) => {
    if (/^\//.test(selector)) {
        return document.evaluate(selector, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
    } else {
        return document.querySelector(selector);
    }
};

let check = false;
check = /reg/.test(location.href);

let includeSelector;
includeSelector = "includeSelector";
includeSelector = [
    "includeSelectorA",
    "includeSelectorB",
    "includeSelectorC"
];

if (Array.isArray(includeSelector)) {
    let checkElements = includeSelector.map((selector) => ge(selector)); //生成一个元素数组
    let checkItems = checkEles.filter(item => item); //筛掉null
    if (checkItems.length/*筛掉后的数组数*/ === 0) {
        //页面没有任何数组选择器中必须包含的元素
        return; //回圈用continue;跳过
    } else if (checkElements.length/*元素数组数*/ != checkItems.length/*筛掉后的数组数*/) {
        //页面缺少数组选择器中必须包含的元素
        return; //回圈用continue;跳过
    }
} else {
    check = !!ge("includeSelector"); // 有元素true没元素false
}

let excludeSelector = "excludeSelector";
check = !ge("excludeSelector"); // 有元素false没元素true

if (!check) { //未通过检查
    return; //回圈用continue;
}

if (check) {
    //code
    //回圈用break;跳出
} 

你的问题pica.com和picb.com的匹配如果只是过正则判断网址,都匹配到了。
那还要区分pica.com和picb.com,就需判断元素或字符串,字符串用Xpath。

pica.com
/pica.com/.test(location.href) && ge("selector") && ge("//title[contains(text(),'pica.com')]")

picb.com
/picb.com/.test(location.href) && ge("selector") && ge("//title[contains(text(),'picb.com')]")

例如极品性感美女经常换域名,正则只写location.pathname的部分,再用Xpath判断关键元素和字符串
/\/\w+\/\w+\.html$/.test(location.href) && ge("//div[@class='toptip']/a[text()='极品性感美女']")

回圈for判断json数组物件[{},{}],你可以参考脚本2.0.0的第22001~22320行

好的明白了大佬,我这边用uri路径+css选择器来匹配

Reactie plaatsen

Log in om antwoord te geven.