☰

toGallery

图片列表转换为画廊

Tính đến 10-08-2025. Xem phiên bản mới nhất.

Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta // @require https://update.sleazyfork.org/scripts/545309/1639049/toGallery.js 

// ==UserScript==
// @name         toGallery
// @namespace    http://tampermonkey.net/
// @version      2025-08-10
// @description  图片列表转换为画廊
// @author       ssnangua
// @license      MIT
// @match        *://*/*
// @grant        GM_addStyle
// ==/UserScript==
 
(function() {
    'use strict';
 
    window.toGallery = function toGallery(imgList) {
        document.head.innerHTML = `<title>${document.title}</title>`;
 
        document.body.innerHTML = `
          <div id="gallery">
            ${imgList.map((src, index) => `
              <span class="item" data-src="${src}">
                <img src="${src}" onload="window.onImgLoaded()">
                <div style="text-align: center;">${index + 1}</div>
              </span>
             `).join('')}
          </div>
          <div id="progress">0/${imgList.length}</div>
          <div id="mask"><img id="preview"></div>
        `;
 
        document.body.parentElement.scrollTop = 0;
 
        const progress = {
            $progress: document.querySelector('#progress'),
            loaded: 0,
            increase() {
                this.$progress.innerHTML = `${++this.loaded} / ${imgList.length}`;
            }
        };
 
        document.querySelectorAll('#gallery img').forEach(($img) => {
            $img.onload = () => progress.increase();
        });
 
        const preview = {
            $mask: document.querySelector('#mask'),
            $preview: document.querySelector('#preview'),
            show(src) {
                document.body.parentElement.classList.add('is-preview');
                this.$preview.src = src;
                this.$mask.scrollTop = 0;
            },
            hide() {
                document.body.parentElement.classList.remove('is-preview');
                this.$preview.src = '#';
            }
        };
        preview.$mask.onclick = () => preview.hide();
 
        document.querySelector('#gallery').onclick = (e) => {
            const src = e.target.dataset.src;
            if (src) preview.show(src);
        };
 
        GM_addStyle(`
          #gallery {
            display: flex;
            flex-flow: row wrap;
            gap: 10px;
            padding-bottom: 50px;
 
            & .item {
              align-self: flex-end;
              cursor: pointer;
 
              & * {
                pointer-events: none;
              }
 
              & img {
                width: 100px;
                min-height: 100px;
                object-fit: contain;
                background-color: #ccc;
                transition: all 0.1s;
              }
 
              &:hover img {
                opacity: 0.5;
              }
            }
          }
 
          #progress {
            position: fixed;
            left: 10px;
            bottom: 10px;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            border-radius: 4px;
            padding: 4px 8px;
            font-size: 16px;
            pointer-events: none;
          }
 
          #mask {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.8);
            z-index: 1;
            overflow: auto;
            text-align: center;
          }
 
          html.is-preview {
            overflow: hidden;
 
            & #mask {
              display: block;
            }
          }
        `);
    }
})();