MediaWiki:Gadget-ImageCompare.js
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
mw.loader.load('https://cdn.jsdelivr.net/npm/zurb-twentytwenty/css/twentytwenty.min.css', 'text/css');
mw.loader.getScript( 'https://cdn.jsdelivr.net/npm/zurb-twentytwenty/js/jquery.event.move.js' );
mw.loader.getScript('https://cdn.jsdelivr.net/npm/zurb-twentytwenty/js/jquery.twentytwenty.min.js')
.then(function () {
// Ensure the document is ready
$(document).ready(function() {
// Function to adjust the container width
function adjustContainerWidth() {
$(".twentytwenty-container").each(function() {
var $container = $(this);
var $images = $container.find("img");
var maxWidth = 0;
// Calculate the maximum width of the images
$images.each(function() {
var imgWidth = $(this).width();
if (imgWidth > maxWidth) {
maxWidth = imgWidth;
}
});
// Set the width of the container to the maximum image width
$container.css("width", maxWidth + "px");
});
}
// Initialize the twentytwenty plugin with custom labels and adjust the container width
$(".twentytwenty-container").each(function() {
var beforeLabel = $(this).data('before-label') || "Magazine";
var afterLabel = $(this).data('after-label') || "Volume";
// Initialize the twentytwenty plugin
$(this).twentytwenty({
before_label: beforeLabel,
after_label: afterLabel,
move_with_handle_only: false,
click_to_move: true
});
// Adjust the container width
adjustContainerWidth();
});
// Adjust the container width on window resize
$(window).resize(function() {
adjustContainerWidth();
});
});
}, function (e) {
// Script failed
mw.log.error(e.message); // => "Failed to load script"
});
