MediaWiki:Common.js: Difference between revisions

Jump to navigation Jump to search
no edit summary
No edit summary
Tags: Manual revert Reverted
No edit summary
Tag: Manual revert
Line 43: Line 43:
     // Check if the specific element exists on the page
     // Check if the specific element exists on the page
     if ($('#show-article-wrapper-entry').length > 0 || $('#show-article-wrapper').length > 0) {
     if ($('#show-article-wrapper-entry').length > 0 || $('#show-article-wrapper').length > 0) {
        // If it exists, run the setupImageToggle function with the images found within the article content
         var images = []; // Initialize an empty array to store the images
         var images = []; // Initialize an empty array to store the images


Line 61: Line 60:
         if (images.length > 0) {
         if (images.length > 0) {
             setupImageToggle(images); // Call the setupImageToggle function with the images array
             setupImageToggle(images); // Call the setupImageToggle function with the images array
            updateImageLabel(1, images.length); // Set the label for the first image immediately
         }
         }
     }
     }
Line 488: Line 488:


     function setupImageToggle(images) {
     function setupImageToggle(images) {
        var currentIndex = 0;
    var currentIndex = 0;
        var totalImages = images.length;
   
    function toggleImage() {
        function toggleImage() {
        currentIndex = (currentIndex + 1) % images.length;
            currentIndex = (currentIndex + 1) % totalImages;
        var image = images[currentIndex];
            var image = images[currentIndex];
        updateImageLabel(currentIndex + 1, images.length); // Update the label on toggle
            console.log("Toggling to image index:", currentIndex, "Src:", image.src);
        $('#article-content').find('.article-images').html(getImageHtml(image, currentIndex, images.length));
            $('#article-content').find('.article-images').html(getImageHtml(image, currentIndex, totalImages));
    }
        }
   
    $('#article-content').on('click', '.image-container img', function() {
        // Updated event binding
        toggleImage();
        $('#article-content').on('click', '.image-container img', function () {
    });
            console.log("Image clicked");
}
            toggleImage();
        });
    }
      
      
     function getImageHtml(image, currentIndex, totalImages) {
     function getImageHtml(image, currentIndex, totalImages) {
        var imageLabel = (currentIndex + 1) + '/' + totalImages + ' IMAGES';
    var imageLabel = (currentIndex + 1) + '/' + totalImages + ' IMAGES';
        return '<p class="article-label-image">' + imageLabel + '</p>' +
    return '<p class="article-label-image">' + imageLabel + '</p>' +
            '<div class="image-container">' +
        '<div class="image-container">' +
                '<img src="' + image.src + '" alt="' + image.alt + '">' +
            '<img src="' + image.src + '" alt="' + image.alt + '">' +
                '<div class="' + image.captionClass + '">' + image.caption + '</div>' +
            '<div class="' + image.captionClass + '">' + image.caption + '</div>' +
            '</div>';
        '</div>';
    }
}
function updateImageLabel(currentIndex, totalImages) {
    var imageLabel = currentIndex + '/' + totalImages + ' IMAGES';
    $('#article-content .article-label-image').text(imageLabel); // Update or set the label text
}
      
      
$(document).on('mousedown', function (event) {
$(document).on('mousedown', function (event) {

Navigation menu