链接转换为图片浏览器

在指定网页（请手动将@match后的链接修改为想要的）将所有指向图片的链接中的图片显示出来，并打开图片浏览器
当前为 2021-05-13 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         链接转换为图片浏览器
// @namespace    Thomaskara
// @run-at       document-end
// @version      0.3
// @description  在指定网页（请手动将@match后的链接修改为想要的）将所有指向图片的链接中的图片显示出来，并打开图片浏览器
// @author       Thomas Kara
// @match        http*://*debian10/S4f_/*/
// @grant        GM_addStyle
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js
// @require      https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.js
// @resource     IMPORTED_CSS https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.css
// @grant        GM_getResourceText
// ==/UserScript==


// Get source code by https://robwu.nl/crxviewer/?crx=https://....

(function() {
    'use strict';

    // img-inspector
    // https://chrome.google.com/webstore/detail/img-inspector/hpogobkggapdhmfnamfnhmchcbmehokb
    // (scripts/content_script.js)
    GM_addStyle ( `
.imginspector_image {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.33);
    cursor: pointer;
    max-height: 10vh;
    max-width: 20vh;
    max-width: 20%;
}

.imginspector_compact {
    max-width: 200px;
    max-height: 200px;
}

.imginspector_imagesonly {
    margin: 5px;
    float: left;
}

#imginspector_imgoverlay {
    position: fixed !important;
    left: 0px !important;
    top: 0px !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    z-index: 99999990 !important;
}


#imginspector_image {
    display: block;
    left: 50%;
    top: 50%;
    position: absolute;
    background-color: black;
    border: 1px solid black;
    -webkit-box-shadow: 0px 0px 12px #000 !important;
}
    ` );

    function getLinkExtension(a) {
        var b = null;
        if (null != a) {
            a = a.toLowerCase();
            var c = a.lastIndexOf(".");
            0 < c && (b = a.substring(c + 1))
        }
        return b
    }

    function isImageLink(uri) {
        var img_exts = "bmp jpg jpeg tif tiff png gif webp apng avif svg ico".split(" ");
        return (uri != null) && ((img_exts.indexOf(getLinkExtension(uri)) >= 0 ? true : false) || (uri.indexOf('imgur') > 0));
    }

    function getImageLink(uri) {
        if (uri.indexOf('imgur') > 0) {
            return uri + ".jpg";
        } else {
            return uri;
        }
    }

    var lnk_list = document.querySelectorAll('a');
    var className = "imginspector_image";
    // Inline images
    for (var ii in lnk_list) {
        var lnk = lnk_list[ii];
        if (isImageLink(lnk.href)) {
            if (!lnk.classList.contains("imginspector_done")) {
                var img = document.createElement('img');
                img.setAttribute('src', getImageLink(lnk.href));
                img.setAttribute('class', className);
                img.setAttribute('title', lnk.href+"点击打开图片浏览器");
                img.addEventListener('click', function jt(){jumpto(this)}, false);
                //lnk.appendChild(img);
                lnk.parentElement.insertBefore(img, lnk);
                lnk.classList.add("imginspector_done");
            }
        }
    }

    // Slideshow
    // https://chrome.google.com/webstore/detail/slideshow/dhfkiofcnkapfpcpcpaindoikmimefnc
    // (injected.js)
    GM_addStyle(GM_getResourceText("IMPORTED_CSS"));

    var instance;
    var images = [];
    function jumpto(t){
        //if (!instance)
            instance=slideshow();
        //instance.activate();
        instance.jumpTo(images.indexOf(getImgTag(t.getAttribute('src'))));
    }

    function getImgTag(url){
        return "<img src=\"" + url + "\" style=\"width: 100% !important;min-height: 100vh !important;height: 100vh !important;display: inline-block;object-fit: contain;\" />";
    }

    function slideshow(){
        var urls = [];
        for (var i of $("img")) {
            urls.push(i.src);
        }

        for (var backgroundImage of findAllBackgroundImages()) {
            urls.push(backgroundImage);
        }

        urls = distinct(urls);

        for (var url of urls) {
            //images.push(url);
            images.push(getImgTag(url));
        }

        return $.fancybox.open(images, {
            toolbar: true,
            modal: false,
            padding: 25,
            showCloseButton: true,
            hideOnOverlayClick: true,
            titlePosition: 'outside',
            enableEscapeButton: true,
            animationDuration: 50,
            transitionDuration: 50,
            type: 'image',
        });

        function distinct(arr) {
            return arr.filter(onlyUnique);
        }

        function onlyUnique(value, index, self) {
            return self.indexOf(value) === index;
        }

        function findAllBackgroundImages() {
            var tags = document.getElementsByTagName('*');
            var el;
            var backgroundImages = [];

            for (var i = 0, len = tags.length; i < len; i++) {
                el = tags[i];
                if (el.currentStyle) {
                    backgroundImage = el.currentStyle['backgroundImage'];
                    if (backgroundImage !== 'none') {
                        backgroundImages.push(backgroundImage);
                    }
                } else if (window.getComputedStyle) {
                    backgroundImage = document.defaultView.getComputedStyle(el, null)
                        .getPropertyValue('background-image');
                    if (backgroundImage !== 'none')
                        backgroundImages.push(backgroundImage);
                }
            }

            var sanitizedImages = [];
            var regex = /url\((?:"|')(.+)(?:"|')\)/;

            for (var backgroundImage of backgroundImages) {
                if (regex.test(backgroundImage)) {
                    sanitizedImages.push(regex.exec(backgroundImage)[1]);
                }
            }

            return sanitizedImages;
        }
    }
})();
欢迎访问Greasy Fork镜像
