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 inside the gallery
+            }
-    $('.fancybox-gallery a').each(function() {
+         };
-        var $link = $(this);
+         mw.config.set('wgPhotoSwipeConfig', config);
-        var filePageUrl = $link.attr('href');  // Get the link to the file 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;
-        // Update the link to point to the full image URL
-        $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'
-        }
-     });
 });