Sleazy Fork

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

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

我比较偏向滚轮切换图片

你可以自己修改脚本

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);

})();

滚轮能否支持放大和缩小

1.11.5 已更新

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

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

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

更新代碼

// ==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);

})();

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

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

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

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

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

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

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

好的，我以为是你写的源码，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

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

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

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

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

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

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

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

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

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

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

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

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

有效，只是点开显示是最小的倍率，缩放倍率太大了不够自然。
图标也有。
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);

})();

// ==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);
    }

})();

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

1.12.0 已更新

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

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

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

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

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

丢失油猴菜单

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

这类原图排列吗

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.12.1 已更新

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

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

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

以前collect的几个pic sites，分享给老司机们，
https://nakedwomenpics.com/
https://teenpussypics.com/
https://viewgals.com/
https://hotpussypics.com/
https://bustypassion.com/
素颜自然不遮掩

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

能不能在单图模式下也能切换下一张？

没办法，切换必需是画廊模式，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。

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

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

能不能在单图模式下也能切换下一张？

没办法，切换必需是画廊模式，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.com跟picb.com都匹配到了，如何确定是否pica还是picb

向大佬致敬，我也写了一个看图的js插件，看了源码发现是通过css选择器来进行识别的，那如果不同网站比如pica.com跟picb.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行

向大佬致敬，我也写了一个看图的js插件，看了源码发现是通过css选择器来进行识别的，那如果不同网站比如pica.com跟picb.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选择器来匹配