4,396
edits
No edit summary Tag: Manual revert |
No edit summary |
||
Line 126: | Line 126: | ||
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]; | ||
// Update only the image part, not the entire content | |||
$('#article-content').find('.article-image').html(getImageHtml(image, currentIndex, totalImages)); | |||
} | } | ||
// 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 () { | ||
toggleImage(); | toggleImage(); | ||
}); | }); | ||
} | } | ||
function getImageHtml(image) { | function getImageHtml(image, currentIndex, totalImages) { | ||
var imageLabel = (currentIndex + 1) + '/' + totalImages + ' IMAGES'; | |||
return '<div class="image-container">' + | return '<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>' + | ||
} | '<p class="article-label-image">' + imageLabel + '</p>'; | ||
} | |||
// Attach a mousedown event listener to close the fixed column | // Attach a mousedown event listener to close the fixed column |