支持寫真、H漫、漫畫的網站1000+，圖片全量加載，簡易的看圖功能，漫畫無限滾動閱讀模式，下載壓縮打包，如有下一頁元素可自動化下載。
< Opiniones de 圖片全載-FancyboxV5
可是查看图片界面，滚轮能否支持放大和缩小，其实界面左右两边已经有上下一张图片的快捷按钮了，滚轮应该设置成放大和缩小感觉才好，你觉得呢。
我比较偏向滚轮切换图片
你可以自己修改脚本
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选择器来匹配
脚本很强，很大，很广，先给一个赞。
可是查看图片界面，滚轮能否支持放大和缩小，其实界面左右两边已经有上下一张图片的快捷按钮了，滚轮应该设置成放大和缩小感觉才好，你觉得呢。
接着有一个请求，图片查看功能界面很强很好，能否独自制作一个单纯的图片查看脚本，方便查看其他网站的图片？再一次好评给予！