MediaWiki:Common.js: Difference between revisions

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);
    }
});

@@ 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 in the gallery
+            }
-    $('.fancybox-gallery a').each(function() {
+         };
-        var $link = $(this);
+         mw.config.set('wgPhotoSwipeConfig', config);
-        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'
-        }
-     });
 });