☰

GM_Gallery

图片列表转换为画廊

Version vom 10.08.2025. Aktuellste Version

Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.sleazyfork.org/scripts/545309/1639135/GM_Gallery.js 

;(function() {
    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;
                border: 0.5px solid #ccc;
              }
 
              &: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;
            }
          }
        `;
    }
})();