MediaWiki:Common.js: Difference between revisions

From Mor Afgin Website
No edit summary
No edit summary
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
// Initialize PhotoSwipe
 
mw.loader.using(['ext.photoSwipe'], function() {
// Load Fancybox CSS
     var config = mw.config.get('wgPhotoSwipeConfig');
$('<link>')
    if (!config) {
  .appendTo('head')
         // Default configuration if none exists
  .attr({
         config = {
    type: 'text/css',
            mode: 'recommended',
    rel: 'stylesheet',
             options: {
    href: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css'
                gallery: 'table.gallery',
  });
                children: 'a.img',
 
                thumbSelector: 'a.img',
// Load Fancybox JS
                allowPanToNext: false,
$.getScript('https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js', function() {
                wheelToZoom: true
     // Apply Fancybox to all images inside the gallery
            }
    $('.fancybox-gallery a').each(function() {
         };
        var $link = $(this);
         mw.config.set('wgPhotoSwipeConfig', config);
        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 fileDescriptionUrl = $link.attr('href'); // Get the current href which is leading to the file description page
 
        // Log both the thumbnail and full image URLs for debugging
        console.log('Thumbnail URL:', thumbnailUrl);
        console.log('File Description URL:', fileDescriptionUrl);
 
        // Replace the /index.php/File: part with /images/ to construct the direct image URL
         var fileName = fileDescriptionUrl.match(/File:(.+)$/)[1];  // Extract the file name
         var fullImageUrl = 'https://www.morafgin.com/images/' + fileName.charAt(0) + '/' + fileName.charAt(1) + '/' + fileName;
 
        // Log the constructed full image URL for debugging
        console.log('Constructed Full Image URL:', fullImageUrl);
 
        // Update the link to point to the full image URL
        $link.attr('href', fullImageUrl);
 
        // 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'
        }
    });
     */
});
});

Latest revision as of 19:05, 28 October 2024

// Initialize PhotoSwipe
mw.loader.using(['ext.photoSwipe'], function() {
    var config = mw.config.get('wgPhotoSwipeConfig');
    if (!config) {
        // Default configuration if none exists
        config = {
            mode: 'recommended',
            options: {
                gallery: 'table.gallery',
                children: 'a.img',
                thumbSelector: 'a.img',
                allowPanToNext: false,
                wheelToZoom: true
            }
        };
        mw.config.set('wgPhotoSwipeConfig', config);
    }
});