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.getScript('https://unpkg.com/beerslider/dist/BeerSlider.js')
.then(function () {
$(document).ready(function() {
$.fn.BeerSlider = function (options) {
options = options || {};
return this.each(function() {
new BeerSlider(this, options);
});
};
function waitForImagesToLoad($img1, $img2, callback) {
var img1Loaded = false;
var img2Loaded = false;
function checkIfBothImagesLoaded() {
if (img1Loaded && img2Loaded) {
console.log('Both images loaded');
callback();
}
}
$img1.on('load', function() {
img1Loaded = true;
console.log('Image 1 loaded');
checkIfBothImagesLoaded();
}).on('error', function() {
console.error('Image 1 failed to load.');
});
$img2.on('load', function() {
img2Loaded = true;
console.log('Image 2 loaded');
checkIfBothImagesLoaded();
}).on('error', function() {
console.error('Image 2 failed to load.');
});
// If images are already loaded (cached)
if ($img1[0].complete && $img1[0].naturalHeight !== 0) {
img1Loaded = true;
console.log('Image 1 already loaded (cached)');
}
if ($img2[0].complete && $img2[0].naturalHeight !== 0) {
img2Loaded = true;
console.log('Image 2 already loaded (cached)');
}
// Check initially if already loaded
checkIfBothImagesLoaded();
}
function initializeBeerSlider(el) {
var $img1 = $(el).find('img').first(); // Find the first img inside the beer-slider
var $img2 = $(el).find('.beer-reveal img').first(); // Find the first img inside the beer-reveal
console.log('Initializing BeerSlider for element:', el);
console.log('Image 1 src:', $img1.attr('src'));
console.log('Image 2 src:', $img2.attr('src'));
// Check if both images have valid src attributes
var img1Src = $img1.attr('src');
var img2Src = $img2.attr('src');
if (img1Src && img2Src) {
waitForImagesToLoad($img1, $img2, function() {
console.log('Initializing BeerSlider now');
$(el).BeerSlider({start: $(el).data('beer-start')});
});
} else {
console.warn('Skipping BeerSlider initialization for element due to missing image src:', el);
}
}
$('.beer-slider').each(function(index, el) {
initializeBeerSlider(el);
});
});
}, function (e) {
// Script failed
mw.log.error(e.message); // => "Failed to load BeerSlider script"
});