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 (which contains the full image URL in its structure)
        var thumbnailUrl = $image.attr('src');
        var fullImageUrl = $link.attr('href'); // Get the current href which Wikimedia may generate

        // Log both the thumbnail and full image URLs for debugging
        console.log('Thumbnail URL:', thumbnailUrl);
        console.log('Full Image URL (from href):', fullImageUrl);

        // Use the full image URL if available, otherwise try to extract from the thumbnail URL
        if (fullImageUrl) {
            $link.attr('href', fullImageUrl);  // Use full image URL from href
        } else {
            console.log('No full image URL available in href, using fallback.');
        }

        // Open in a new tab for debugging
        $link.attr('target', '_blank');  // Temporarily open in a new tab to check the URL

        // Later, re-enable Fancybox after verifying URLs are correct
        // $link.attr('data-fancybox', 'gallery');  // Enable Fancybox for this link
    });

    // Re-enable this after URL verification
    /*
    $('[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'
        }
    });
    */
});