4,476
edits
No edit summary Tag: Reverted |
No edit summary Tags: Manual revert Reverted |
||
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 60: | Line 61: | ||
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 | ||
} | } | ||
} | } | ||
Line 488: | Line 488: | ||
function setupImageToggle(images) { | function setupImageToggle(images) { | ||
var currentIndex = 0; | |||
var totalImages = images.length; | |||
function toggleImage() { | |||
currentIndex = (currentIndex + 1) % totalImages; | |||
var image = images[currentIndex]; | |||
console.log("Toggling to image index:", currentIndex, "Src:", image.src); | |||
$('#article-content').find('.article-images').html(getImageHtml(image, currentIndex, totalImages)); | |||
} | |||
// Updated event binding | |||
$('#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'; | |||
return '<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>'; | |||
} | |||
$(document).on('mousedown', function (event) { | $(document).on('mousedown', function (event) { |