MediaWiki:Gadget-ImageCompare.js

From JoJo's Bizarre Encyclopedia - JoJo Wiki
Revision as of 08:46, 26 July 2024 by Vish (talk | contribs)
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 () {
        $(document).ready(function() {
            // Iterate over each twentytwenty-container and initialize the plugin
            $(".twentytwenty-container").each(function() {
                var beforeLabel = $(this).data('before-label') || "Magazine";
                var afterLabel = $(this).data('after-label') || "Volume";
                
                // Initialize the twentytwenty plugin with custom labels
                $(this).twentytwenty({
                    before_label: beforeLabel,
                    after_label: afterLabel,
                    move_with_handle_only: false,
                    click_to_move: true
                });
            });
		});
    },
    function ( e ) {
        // Script failed
        mw.log.error( e.message ); // => "Failed to load script"
    }
);