MediaWiki:Common.js: Difference between revisions

From Mor Afgin Website
No edit summary
No edit summary
Line 15: Line 15:
     $('.fancybox-gallery a').each(function() {
     $('.fancybox-gallery a').each(function() {
         var $link = $(this);
         var $link = $(this);
         var filePageUrl = $link.attr('href');  // Get the link to the file page
         var filePageUrl = $link.attr('href');  // Get the link to the file description page


         // Extract the file name from the Wikimedia URL (e.g., File:Equinox1123.jpg)
         // Extract the file name from the Wikimedia URL (e.g., File:Equinox1123.jpg)
Line 22: Line 22:
         // Construct the full image URL based on the file name (direct path to /images/ directory)
         // Construct the full image URL based on the file name (direct path to /images/ directory)
         var fullImageUrl = '/images/' + fileName.charAt(0) + '/' + fileName.charAt(1) + '/' + fileName;
         var fullImageUrl = '/images/' + fileName.charAt(0) + '/' + fileName.charAt(1) + '/' + fileName;
        // Log the constructed image URL to the console for debugging
        console.log('Constructed Full Image URL:', fullImageUrl);


         // Update the link to point to the full image URL
         // Update the link to point to the full image URL
         $link.attr('href', fullImageUrl);
         $link.attr('href', fullImageUrl);
         $link.attr('data-fancybox', 'gallery');  // Enable Fancybox for this link
 
         // Disable Fancybox temporarily for debugging: open in a new tab to verify the URL
        $link.attr('target', '_blank');  // Open in a new tab
 
        // Later, we'll re-enable Fancybox:
        // $link.attr('data-fancybox', 'gallery');  // Enable Fancybox for this link
     });
     });


     // Initialize Fancybox with custom settings
     // Re-enable this once URLs are verified
    /*
     $('[data-fancybox="gallery"]').fancybox({
     $('[data-fancybox="gallery"]').fancybox({
         buttons: [
         buttons: [
Line 39: Line 48:
         protect: true,
         protect: true,
         loop: true,
         loop: true,
        // Set max width and height to 90% of the screen
         maxWidth: '90%',
         maxWidth: '90%',
         maxHeight: '90%',
         maxHeight: '90%',
Line 47: Line 55:
         transitionEffect: 'fade',
         transitionEffect: 'fade',
         mobile: {
         mobile: {
             clickSlide: 'close', // Customize for mobile if needed
             clickSlide: 'close',
             clickOutside: 'close'
             clickOutside: 'close'
         }
         }
     });
     });
    */
});
});

Revision as of 17:52, 21 October 2024

/* 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 filePageUrl = $link.attr('href');  // Get the link to the file description page

        // Extract the file name from the Wikimedia URL (e.g., File:Equinox1123.jpg)
        var fileName = filePageUrl.match(/File:(.+)$/)[1];

        // Construct the full image URL based on the file name (direct path to /images/ directory)
        var fullImageUrl = '/images/' + fileName.charAt(0) + '/' + fileName.charAt(1) + '/' + fileName;

        // Log the constructed image URL to the console for debugging
        console.log('Constructed Full Image URL:', fullImageUrl);

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

        // Disable Fancybox temporarily for debugging: open in a new tab to verify the URL
        $link.attr('target', '_blank');  // Open in a new tab

        // Later, we'll re-enable Fancybox:
        // $link.attr('data-fancybox', 'gallery');  // Enable Fancybox for this link
    });

    // Re-enable this once URLs are verified
    /*
    $('[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'
        }
    });
    */
});