4,396
edits
MediaWiki:Common.js: Difference between revisions
Jump to navigation
Jump to search
no edit summary
No edit summary |
No edit summary Tag: Reverted |
||
| Line 40: | Line 40: | ||
} | } | ||
// Set up image toggle if more than one image is found | // Set up image toggle if more than one image is found | ||
if (cardImages.length > 1) { | if (cardImages.length > 1) { | ||
| Line 81: | 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 | ||
articleContentHtml += | // Append the image HTML with the dynamic label | ||
articleContentHtml += getImageHtml(initialImage, 0, cardImages.length); // Add current index and total | |||
} | } | ||
// Add non-image content (description, reflection, etc.) | // Add non-image content (description, reflection, etc.) | ||
articleContentHtml += | articleContentHtml += | ||
| Line 126: | Line 122: | ||
function setupImageToggle(images) { | function setupImageToggle(images) { | ||
var currentIndex = 0; | var currentIndex = 0; | ||
var totalImages = images.length; | |||
function toggleImage() { | function toggleImage() { | ||
currentIndex = (currentIndex + 1) % | currentIndex = (currentIndex + 1) % totalImages; | ||
var image = images[currentIndex]; | var image = images[currentIndex]; | ||
var articleImageContainer = $('#article-content | var articleImageContainer = $('#article-content'); | ||
articleImageContainer.html(getImageHtml(image)); | articleImageContainer.html(getImageHtml(image, currentIndex, totalImages)); | ||
} | } | ||
| Line 137: | Line 134: | ||
toggleImage(); | toggleImage(); | ||
}); | }); | ||
} | } | ||
function getImageHtml(image) { | function getImageHtml(image, currentIndex, totalImages) { | ||
return '<div class="image-container">' + | var imageLabel = (currentIndex + 1) + '/' + totalImages + ' IMAGES'; | ||
return '<div class="article-images">' + | |||
'<p class="article-label-image">' + imageLabel + '</p>' + | |||
'<div class="image-container">' + | |||
'<img src="' + image.src + '" alt="' + image.alt + '">' + | |||
'<div class="' + image.captionClass + '">' + image.caption + '</div>' + | |||
'</div>' + | |||
'</div>'; | '</div>'; | ||
} | } | ||