|
|
| (12 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'); | | mw.hook('ext.popups').add(function() { |
| mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css', 'text/css');
| | $('.mwe-popups-extract .portable-infobox').each(function() { |
| mw.loader.load('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css', 'text/css');
| | var $infobox = $(this); |
| | var $firstParagraph = $('.mwe-popups-extract p:first'); |
|
| |
|
| mw.hook('wikipage.content').add(function($content) {
| | // If there is a paragraph, move the infobox after it |
| $content.find('.mw-jsslideshow').each(function() {
| | if ($firstParagraph.length) { |
| const $slideshowContainer = $(this);
| | $infobox.insertAfter($firstParagraph); |
| const $slideshow = $('<div class="slideshow"></div>');
| | } else { |
| | | // If there's no paragraph, just hide the infobox |
| // Find all images inside mw-jsslideshow, including [[File:]] images | | $infobox.hide(); |
| $slideshowContainer.find('img').each(function() { | | } |
| const $img = $(this); | |
| const $slide = $('<div></div>').append($img.clone()); // Wrap in slide div
| |
| $slideshow.append($slide);
| |
| }); | |
| | |
| // Replace old content with the new slick-ready slideshow
| |
| $slideshowContainer.empty().append($slideshow);
| |
| | |
| // Initialize slick
| |
| $slideshow.slick({
| |
| infinite: true, | |
| slidesToShow: 1,
| |
| slidesToScroll: 1,
| |
| autoplay: true,
| |
| autoplaySpeed: 5000,
| |
| arrows: true,
| |
| dots: true,
| |
| adaptiveHeight: true
| |
| });
| |
| | |
| // Fix positioning on resize
| |
| $(window).on('resize', function() {
| |
| $slideshow.slick('setPosition'); | |
| }); | |
| }); | | }); |
| }); | | }); |
