MediaWiki:Common.js

/* 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 inside the gallery
    $('.fancybox-gallery a').each(function() {
        var $link = $(this);
        var $image = $link.find('img');  // Find the image element inside the link

        // Get the thumbnail URL
        var thumbnailUrl = $image.attr('src');

        // Convert the thumbnail URL to the full image URL by removing "/thumb/" and the size part
        var fullImageUrl = thumbnailUrl.replace('/thumb', '').replace(/\/\d+px-.+$/, '');

        // Update the link to point to the full image URL
        $link.attr('href', fullImageUrl);

        // Enable Fancybox for this link
        $link.attr('data-fancybox', 'gallery');

        // Log final URLs and dimensions for debugging
        console.log('Setting href for Fancybox:', fullImageUrl);
        console.log('Image original width:', $image.attr('width'), 'height:', $image.attr('height'));
    });

    // Initialize Fancybox with explicit dimensions and event logging
    $('[data-fancybox="gallery"]').fancybox({
        buttons: [
            'zoom',
            'slideShow',
            'fullScreen',
            'thumbs',
            'close'
        ],
        protect: true,
        loop: true,
        maxWidth: '90%',
        maxHeight: '90%',
        width: 'auto',
        height: 'auto',
        responsive: true,
        transitionEffect: 'fade',
        mobile: {
            clickSlide: 'close',
            clickOutside: 'close'
        },
        // Log Fancybox loading and display events for debugging
        afterLoad: function(instance, current) {
            console.log('Fancybox loaded with URL:', current.src);
            console.log('Fancybox item width:', current.width, 'height:', current.height);
        },
        afterShow: function(instance, current) {
            console.log('Fancybox showing image:', current.src);
            console.log('Actual displayed dimensions - width:', current.$image.width(), 'height:', current.$image.height());
        },
        onInit: function(instance) {
            console.log('Fancybox initialized');
        }
    });
});

// Add custom CSS to ensure Fancybox images scale to 90% of the viewport
$('<style>')
  .prop('type', 'text/css')
  .html(`
    .fancybox-content {
        max-width: 90vw !important;
        max-height: 90vh !important;
    }
    .fancybox-image {
        width: 100% !important;
        height: auto !important;
    }
  `)
  .appendTo('head');