|
|
| Line 1: |
Line 1: |
| (function() { | | mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'); |
| function resizeAndCenterSlideshow(mwSlideshow) {
| | mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css', 'text/css'); |
| const slideshow = mwSlideshow.querySelector('.slideshow');
| | mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css', 'text/css'); |
|
| |
|
| if (!slideshow) return; | | mw.hook('wikipage.content').add(function($content) { |
| | $content.find('.mw-jsslideshow .slideshow').each(function() { |
| | const $slideshow = $(this); |
|
| |
|
| // Remove bad positioning injected by original slideshow JS
| | $slideshow.slick({ |
| slideshow.style.position = 'relative'; | | infinite: true, |
| slideshow.style.left = '0';
| | slidesToShow: 1, |
| slideshow.style.top = '0';
| | slidesToScroll: 1, |
| slideshow.style.transform = 'none';
| | autoplay: true, |
| | | autoplaySpeed: 5000, |
| // Let mw-jsslideshow size to fit its parent, no forced widths
| | arrows: true, |
| mwSlideshow.style.width = '100%';
| | dots: true, |
| mwSlideshow.style.height = 'auto';
| | adaptiveHeight: true |
| | |
| // Allow slideshow div to naturally flow within mw-jsslideshow
| |
| slideshow.style.width = '100%';
| |
| slideshow.style.height = 'auto';
| |
| | |
| // Reset each slide div to flow properly
| |
| slideshow.querySelectorAll('div').forEach(slide => {
| |
| slide.style.width = '100%'; | |
| slide.style.height = 'auto'; | |
| slide.style.display = 'flex'; | |
| slide.style.justifyContent = 'center'; | |
| slide.style.alignItems = 'center'; | |
| }); | | }); |
| // Reset images to behave like good responsive citizens
| |
| slideshow.querySelectorAll('img').forEach(img => {
| |
| img.style.width = '100%';
| |
| img.style.height = 'auto';
| |
| img.style.objectFit = 'contain';
| |
| img.style.display = 'block';
| |
| });
| |
| }
| |
|
| |
|
| // Center each individual image inside each slide | | // Keep the slideshow fresh if the window resizes |
| slideshow.querySelectorAll('div').forEach(slide => { | | $(window).on('resize', function() { |
| const img = slide.querySelector('img');
| | $slideshow.slick('setPosition'); |
| if (img) {
| |
| // Make sure each slide is full-width & centers its image
| |
| slide.style.display = 'flex';
| |
| slide.style.justifyContent = 'center';
| |
| slide.style.alignItems = 'center';
| |
| slide.style.width = slideshow.scrollWidth + 'px';
| |
| | |
| img.style.maxWidth = '100%';
| |
| img.style.height = 'auto';
| |
| img.style.objectFit = 'contain';
| |
| }
| |
| }); | | }); |
| } | | }); |
| | | }); |
| function initSlideshowResizer() {
| |
| document.querySelectorAll('.mw-jsslideshow').forEach(mwSlideshow => {
| |
| resizeAndCenterSlideshow(mwSlideshow);
| |
| | |
| // Optional: Resize on window resize
| |
| window.addEventListener('resize', () => {
| |
| resizeAndCenterSlideshow(mwSlideshow);
| |
| });
| |
| | |
| // Observe for changes (like slide swaps)
| |
| const slideshow = mwSlideshow.querySelector('.slideshow');
| |
| if (slideshow) {
| |
| const observer = new MutationObserver(() => {
| |
| resizeAndCenterSlideshow(mwSlideshow);
| |
| });
| |
| | |
| observer.observe(slideshow, {
| |
| attributes: true,
| |
| attributeFilter: ['style'],
| |
| childList: true,
| |
| subtree: true
| |
| });
| |
| }
| |
| });
| |
| }
| |
| | |
| // Init when ready
| |
| if (document.readyState === 'complete' || document.readyState === 'interactive') {
| |
| initSlideshowResizer();
| |
| } else {
| |
| document.addEventListener('DOMContentLoaded', initSlideshowResizer);
| |
| }
| |
|
| |
|
| |
| function cleanSlideshowStyles(slideshowContainer) {
| |
| const slideshow = slideshowContainer.querySelector('.slideshow');
| |
| if (slideshow) {
| |
| // Remove inline styles on the main slideshow container
| |
| slideshow.style.width = '';
| |
| slideshow.style.height = '';
| |
| | |
| // Remove inline styles on each slide div
| |
| slideshow.querySelectorAll('div').forEach(slide => {
| |
| slide.style.width = '';
| |
| slide.style.height = '';
| |
| });
| |
| }
| |
| }
| |
| | |
| function initSlideshowFix() {
| |
| // Locate all mw-jsslideshow instances
| |
| document.querySelectorAll('.mw-jsslideshow').forEach(mwSlideshow => {
| |
| // Clean styles on page load
| |
| cleanSlideshowStyles(mwSlideshow);
| |
| | |
| // Optional: Re-clean styles on window resize
| |
| window.addEventListener('resize', () => {
| |
| cleanSlideshowStyles(mwSlideshow);
| |
| });
| |
| | |
| // Hook into slide transitions if needed (depends on the specific JS driving the slideshow)
| |
| const slideshow = mwSlideshow.querySelector('.slideshow');
| |
| if (slideshow) {
| |
| const observer = new MutationObserver(() => {
| |
| cleanSlideshowStyles(mwSlideshow);
| |
| });
| |
| | |
| observer.observe(slideshow, {
| |
| attributes: true,
| |
| attributeFilter: ['style'],
| |
| childList: false,
| |
| subtree: false
| |
| });
| |
| }
| |
| });
| |
| }
| |
| | |
| // Run once DOM is ready (in case the slideshows are injected late)
| |
| if (document.readyState === 'complete' || document.readyState === 'interactive') {
| |
| initSlideshowFix();
| |
| } else {
| |
| document.addEventListener('DOMContentLoaded', initSlideshowFix);
| |
| }
| |
| })();
| |
| /* Any JavaScript here will be loaded for all users on every page load. */
| |
| (function() {
| |
| function cleanSlideshowStyles(slideshowContainer) {
| |
| const slideshow = slideshowContainer.querySelector('.slideshow');
| |
| if (slideshow) {
| |
| // Remove inline styles on the main slideshow container
| |
| slideshow.style.width = '';
| |
| slideshow.style.height = '';
| |
| | |
| // Remove inline styles on each slide div
| |
| slideshow.querySelectorAll('div').forEach(slide => {
| |
| slide.style.width = '';
| |
| slide.style.height = '';
| |
| });
| |
| }
| |
| }
| |
| | |
| function initSlideshowFix() {
| |
| // Locate all mw-jsslideshow instances
| |
| document.querySelectorAll('.mw-jsslideshow').forEach(mwSlideshow => {
| |
| // Clean styles on page load
| |
| cleanSlideshowStyles(mwSlideshow);
| |
| | |
| // Optional: Re-clean styles on window resize
| |
| window.addEventListener('resize', () => {
| |
| cleanSlideshowStyles(mwSlideshow);
| |
| });
| |
| | |
| // Hook into slide transitions if needed (depends on the specific JS driving the slideshow)
| |
| const slideshow = mwSlideshow.querySelector('.slideshow');
| |
| if (slideshow) {
| |
| const observer = new MutationObserver(() => {
| |
| cleanSlideshowStyles(mwSlideshow);
| |
| });
| |
| | |
| observer.observe(slideshow, {
| |
| attributes: true,
| |
| attributeFilter: ['style'],
| |
| childList: false,
| |
| subtree: false
| |
| });
| |
| }
| |
| });
| |
| }
| |
| | |
| // Run once DOM is ready (in case the slideshows are injected late)
| |
| if (document.readyState === 'complete' || document.readyState === 'interactive') {
| |
| initSlideshowFix();
| |
| } else {
| |
| document.addEventListener('DOMContentLoaded', initSlideshowFix);
| |
| }
| |
| })();
| |
mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js');
mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css', 'text/css');
mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css', 'text/css');
mw.hook('wikipage.content').add(function($content) {
$content.find('.mw-jsslideshow .slideshow').each(function() {
const $slideshow = $(this);
$slideshow.slick({
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 5000,
arrows: true,
dots: true,
adaptiveHeight: true
});
// Keep the slideshow fresh if the window resizes
$(window).on('resize', function() {
$slideshow.slick('setPosition');
});
});
});