Template:ExpandableGallery/doc

Usage

This template allows you to create an expandable and collapsible gallery with lazy loading for images. This helps in reducing the initial load time of the page and provides a better user experience.

Parameters

• preview: The images to show in the preview section when the gallery is collapsed.
• full: The images to show in the full gallery when the gallery is expanded.

Example

To use this template, include it on your page as follows:

{{ExpandableGallery
 |preview=
 [[File:Example1.jpg|thumb|Preview Image 1]]
 [[File:Example2.jpg|thumb|Preview Image 2]]
 |full=
 [[File:Example1.jpg|thumb|Full Image 1]]
 [[File:Example2.jpg|thumb|Full Image 2]]
 [[File:Example3.jpg|thumb|Full Image 3]]
 [[File:Example4.jpg|thumb|Full Image 4]]
 }}

CSS and JavaScript

Ensure the following CSS and JavaScript are added to your MediaWiki site:

CSS (MediaWiki:Common.css)

.expandable-gallery {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
}

.expandable-gallery .gallery-preview img,
.expandable-gallery .gallery-full img {
    max-width: 100px;
    max-height: 100px;
    margin: 5px;
    cursor: pointer;
}

.gallery-toggle a {
    color: #0066cc;
    text-decoration: none;
}

.gallery-toggle a:hover {
    text-decoration: underline;
}

JavaScript (MediaWiki:Common.js)

function toggleGallery(link) {
    var gallery = link.closest('.expandable-gallery');
    var fullGallery = gallery.querySelector('.gallery-full');
    var previewGallery = gallery.querySelector('.gallery-preview');

    if (fullGallery.style.display === 'none') {
        fullGallery.style.display = 'block';
        link.textContent = '[Collapse Gallery]';
        lazyLoadImages(fullGallery);
    } else {
        fullGallery.style.display = 'none';
        link.textContent = '[Expand Gallery]';
    }
}

function lazyLoadImages(container) {
    var images = container.querySelectorAll('img[data-src]');
    images.forEach(function (img) {
        img.src = img.getAttribute('data-src');
        img.removeAttribute('data-src');
    });
}

document.addEventListener("DOMContentLoaded", function () {
    var fullGalleries = document.querySelectorAll('.expandable-gallery .gallery-full img');
    fullGalleries.forEach(function (img) {
        img.setAttribute('data-src', img.src);
        img.removeAttribute('src');
    });
});