MediaWiki:Common.js: Difference between revisions
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 | |||
}); | }); | ||
// | // 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, | ||
maxWidth: '90%', | maxWidth: '90%', | ||
maxHeight: '90%', | maxHeight: '90%', | ||
Line 47: | Line 55: | ||
transitionEffect: 'fade', | transitionEffect: 'fade', | ||
mobile: { | mobile: { | ||
clickSlide: 'close', | 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'
}
});
*/
});