☰

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/1639054/toGallery.js 

// ==UserScript==
// @name         toGallery
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  图片列表转换为画廊
// @author       ssnangua
// @license      MIT
// @match        *://*/*
// @grant        none
// ==/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);
        };

        const style = document.createElement('style');
        document.head.appendChild(style);
        style.innerHTML = `
          #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;
            }
          }
        `;
    }
})();