Finds linked images in an Apache file list and displays them as a thumbnail gallery for easier browsing. E.g. https://thumbnails.libretro.com/Amstrad%20-%20CPC/Named_Boxarts/

linkToGalleryConvertor.js

// ==UserScript==
// @name         Link-to-Gallery Converter
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Finds linked images in an Apache file list and displays them as a thumbnail gallery for easier browsing.
// @author       OdinsHat <doug@tintophat.com>
// @copyright    OdinsHat 2026
// @license      MIT
// @supportURL   https://gist.github.com/OdinsHat/
// @homepageURL  https://strawdogs.co
// @homepage     https://strawdogs.co
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Create the Trigger Button
    const btn = document.createElement('button');
    btn.innerHTML = '🖼️ View Linked Images';
    btn.style = 'position:fixed; top:20px; right:20px; z-index:10000; padding:12px 20px; background:#007bff; color:white; border:none; border-radius:5px; cursor:pointer; font-weight:bold; box-shadow: 0 4px 15px rgba(0,0,0,0.3);';
    document.body.appendChild(btn);

    btn.addEventListener('click', () => {
        // Identify image links
        // Case-insensitive search for jpg, jpeg, png, gif, webp, or svg
        const imageRegex = /\.(jpg|jpeg|png|gif|webp|svg)(\?.*)?$/i;

        const links = Array.from(document.querySelectorAll('a'))
            .map(a => a.href)
            .filter(href => imageRegex.test(href));

        const uniqueLinks = [...new Set(links)];

        if (uniqueLinks.length === 0) {
            alert("No image links found on this page!");
            return;
        }

        // Wipe and Setup the Gallery UI
        document.body.innerHTML = '';
        document.body.style = 'background:#121212; margin:0; padding:40px; color:#eee; font-family:system-ui, sans-serif;';

        const header = document.createElement('h2');
        header.innerText = `Found ${uniqueLinks.length} Linked Images`;
        header.style = 'margin-bottom: 30px; border-bottom: 1px solid #333; padding-bottom: 10px;';
        document.body.appendChild(header);

        const container = document.createElement('div');
        container.style = `
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        `;

        // Generate Thumbnails
        uniqueLinks.forEach(url => {
            const card = document.createElement('div');
            card.style = 'background:#222; border:1px solid #333; border-radius:10px; overflow:hidden; display:flex; flex-direction:column;';

            const img = document.createElement('img');
            img.src = url;
            img.style = 'width:100%; height:200px; object-fit:contain; background:#000; cursor:zoom-in;';
            img.title = "Click to open full size";

            // Open full image in new tab on click
            img.onclick = () => window.open(url, '_blank');

            // Label thumbnail with filename
            const label = document.createElement('div');
            label.innerText = url.split('/').pop().split('?')[0];
            label.style = 'padding:10px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center;';

            card.appendChild(img);
            card.appendChild(label);
            container.appendChild(card);
        });

        document.body.appendChild(container);
    });
})();