|
|
| (4 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
| |
| var thumbnailUrl = $image.attr('src');
| |
| | |
| // Convert the thumbnail URL to the full image URL by removing "/thumb/" and the size part
| |
| var fullImageUrl = thumbnailUrl.replace('/thumb', '').replace(/\/\d+px-.+$/, '');
| |
| | |
| // Update the link to point to the full image URL | |
| $link.attr('href', fullImageUrl); | |
| | |
| // Enable Fancybox for this link
| |
| $link.attr('data-fancybox', 'gallery');
| |
| | |
| // Log final URLs and dimensions for debugging
| |
| console.log('Setting href for Fancybox:', fullImageUrl);
| |
| console.log('Image original width:', $image.attr('width'), 'height:', $image.attr('height'));
| |
| });
| |
| | |
| // Initialize Fancybox with explicit dimensions and event logging
| |
| $('[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'
| |
| }, | |
| // Log Fancybox loading and display events for debugging
| |
| afterLoad: function(instance, current) {
| |
| console.log('Fancybox loaded with URL:', current.src);
| |
| console.log('Fancybox item width:', current.width, 'height:', current.height);
| |
| },
| |
| afterShow: function(instance, current) { | |
| console.log('Fancybox showing image:', current.src);
| |
| console.log('Actual displayed dimensions - width:', current.$image.width(), 'height:', current.$image.height());
| |
| },
| |
| onInit: function(instance) {
| |
| console.log('Fancybox initialized');
| |
| }
| |
| }); | |
| }); | | }); |
|
| |
| // Add custom CSS to ensure Fancybox images scale to 90% of the viewport
| |
| $('<style>')
| |
| .prop('type', 'text/css')
| |
| .html(`
| |
| .fancybox-content {
| |
| max-width: 90vw !important;
| |
| max-height: 90vh !important;
| |
| }
| |
| .fancybox-image {
| |
| width: 100% !important;
| |
| height: auto !important;
| |
| }
| |
| `)
| |
| .appendTo('head');
| |
