☰

GM_Gallery

图片列表转换为画廊

当前为 2025-08-10 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.sleazyfork.org/scripts/545309/1639056/GM_Gallery.js 

;(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;
            }
          }
        `;
    }
})();