☰

GM_Gallery

图片列表转换为画廊

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