MediaWiki:Common.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

/* Any JavaScript here will be loaded for all users on every page load. */

// Load Fancybox CSS
$('<link>')
  .appendTo('head')
  .attr({
    type: 'text/css',
    rel: 'stylesheet',
    href: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css'
  });

// Load Fancybox JS
$.getScript('https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js', function() {
    // Apply Fancybox to all images in the gallery
    $('.fancybox-gallery a').each(function() {
        var $link = $(this);
        var $img = $link.find('img');  // Find the image element inside the link
        var thumbnailUrl = $img.attr('src');  // Get the thumbnail URL

        // Modify the thumbnail URL to get the full-size image URL
        // In Wikimedia, full-size image URLs don't have '/thumb/' and the pixel size part at the end
        var fullImageUrl = thumbnailUrl.replace(/thumb\//, '').replace(/\/\d+px-.+$/, '');  // Adjust URL for full image

        // Set the link to the full image for Fancybox
        $link.attr('href', fullImageUrl);
        $link.attr('data-fancybox', 'gallery');  // Enable Fancybox for this link
    });

    // Initialize Fancybox with custom settings
    $('[data-fancybox="gallery"]').fancybox({
        buttons: [
            'zoom',
            'slideShow',
            'fullScreen',
            'thumbs',
            'close'
        ],
        protect: true,
        loop: true,
        // Set max width and height to 90% of the screen
        maxWidth: '90%',
        maxHeight: '90%',
        width: 'auto',
        height: 'auto',
        responsive: true,
        transitionEffect: 'fade',
        mobile: {
            clickSlide: 'close', // Customize for mobile if needed
            clickOutside: 'close'
        }
    });
});