Zoomable images (gallery) for wiki pages

[deseven]

You can use glightbox to make thumbnail images zoomable. It's lightweight and mobile-friendly.

Add this to customHead.html:

<link href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>

And this to custom.js:

document.addEventListener('DOMContentLoaded', function() {
    // Find all image links and add glightbox class to relative image links
    const imageLinks = document.querySelectorAll('a[href]');
    
    imageLinks.forEach(link => {
        const href = link.getAttribute('href');
        const img = link.querySelector('img');
        
        // Check if this is a relative link to an image and contains an img element
        if (href && img && isRelativeImageLink(href)) {
            // Add glightbox class for gallery functionality
            link.classList.add('glightbox');
            
            // Add data-gallery attribute to group all images in one gallery
            link.setAttribute('data-gallery', 'wiki-images');
            
            // Extract alt text from img for title if available
            const altText = img.getAttribute('alt');
            if (altText && altText.trim()) {
                link.setAttribute('data-title', altText.trim());
            }
        }
    });
    
    // Initialize GLightbox after processing all links
    if (typeof GLightbox !== 'undefined') {
        const lightbox = GLightbox({
            selector: '.glightbox',
            touchNavigation: true,
            loop: false,
            autoplayVideos: false,
            zoomable: false,
            draggable: true,
            closeOnOutsideClick: true,
            keyboardNavigation: true,
            openEffect: 'none',
            closeEffect: 'none'
        });
    }
});

/**
 * Check if a link is a relative image link
 * @param {string} href - The href attribute value
 * @returns {boolean} - True if it's a relative image link
 */
function isRelativeImageLink(href) {
    // Skip external links (http://, https://, //, mailto:, tel:, etc.)
    if (/^(https?:\/\/|\/\/|mailto:|tel:|ftp:)/i.test(href)) {
        return false;
    }
    
    // Check if it's an image file (with or without query parameters like ?thumbnail=200)
    const imageExtensions = /\.(jpg|jpeg|png|gif|bmp|webp|svg|tiff|ico)(\?.*)?$/i;
    return imageExtensions.test(href);
}

For info on how to use custom files, check official docs: https://otterwiki.com/Customization