MediaWiki:Common.js: Difference between revisions

Jump to navigation Jump to search
no edit summary
No edit summary
No edit summary
Line 80: Line 80:
             if (cardImages.length > 0) {
             if (cardImages.length > 0) {
                 var initialImage = cardImages[0]; // Use the first image initially
                 var initialImage = cardImages[0]; // Use the first image initially
                // Append the image HTML with the dynamic label
                 articleContentHtml +=
                 articleContentHtml += getImageHtml(initialImage, 0, cardImages.length); // Add current index and total
                    '<div class="article-images">' +
             }
                        getImageHtml(initialImage, 0, cardImages.length) +
                    '</div>';
             }          
              
              
             // Add non-image content (description, reflection, etc.)
             // Add non-image content (description, reflection, etc.)
Line 127: Line 129:
                 currentIndex = (currentIndex + 1) % totalImages;
                 currentIndex = (currentIndex + 1) % totalImages;
                 var image = images[currentIndex];
                 var image = images[currentIndex];
                 var articleImageContainer = $('#article-content').find('.article-images');
                 // Target the .article-images container to update its content
                articleImageContainer.html(getImageHtml(image, currentIndex, totalImages));
                $('#article-content').find('.article-images').html(getImageHtml(image, currentIndex, totalImages));
             }
             }
       
           
             // Bind click event to a static parent element and delegate to '.article-image img'
             // Bind click event to a static parent element and delegate to '.article-image img'
             $('#article-content').on('click', '.article-image img', function () {
             $('#article-content').on('click', '.article-image img', function () {
Line 137: Line 139:
              
              
         }
         }
       
         
         function getImageHtml(image, currentIndex, totalImages) {
         function getImageHtml(image, currentIndex, totalImages) {
             var imageLabel = (currentIndex + 1) + '/' + totalImages + ' IMAGES';
             var imageLabel = (currentIndex + 1) + '/' + totalImages + ' IMAGES';
             return '<div class="article-images">' +
             return '<p class="article-label-image">' + imageLabel + '</p>' +
                      '<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>';
                   '</div>';
         }  
         }      
          
          
         // Attach a mousedown event listener to close the fixed column
         // Attach a mousedown event listener to close the fixed column

Navigation menu