Jump to content

MediaWiki:Common.js: Difference between revisions

From Continuum Universes Wiki
No edit summary
No edit summary
Line 4: Line 4:


mw.hook('wikipage.content').add(function($content) {
mw.hook('wikipage.content').add(function($content) {
     $content.find('.mw-jsslideshow .slideshow').each(function() {
     $content.find('.mw-jsslideshow').each(function() {
         const $slideshow = $(this);
        const $slideshowContainer = $(this);
         const $slideshow = $('<div class="slideshow"></div>');


        // Find all images inside mw-jsslideshow, including [[File:]] images
        $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({
         $slideshow.slick({
             infinite: true,
             infinite: true,
Line 18: Line 30:
         });
         });


         // Keep the slideshow fresh if the window resizes
         // Fix positioning on resize
         $(window).on('resize', function() {
         $(window).on('resize', function() {
             $slideshow.slick('setPosition');
             $slideshow.slick('setPosition');

Revision as of 14:14, 3 March 2025

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').each(function() {
        const $slideshowContainer = $(this);
        const $slideshow = $('<div class="slideshow"></div>');

        // Find all images inside mw-jsslideshow, including [[File:]] images
        $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');
        });
    });
});