4,114
edits
No edit summary Tag: Manual revert |
No edit summary |
||
Line 20: | Line 20: | ||
// Find all images within the clicked card | // Find all images within the clicked card | ||
var cardImages = []; | var cardImages = []; // Collecting all images in this card | ||
for (var i = 1; i <= 5; i++) { | for (var i = 1; i <= 5; i++) { | ||
var imageClass = '.image' + i; | var imageClass = '.image' + i; | ||
Line 51: | Line 51: | ||
var quote = $(this).find('.quote').text(); | var quote = $(this).find('.quote').text(); | ||
var modificationDate = $(this).find('.modification-date').text(); | var modificationDate = $(this).find('.modification-date').text(); | ||
// Update the fixed column content | // Update the fixed column content | ||
$('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + people + '</p>'); | |||
if (cardImages.length > 0) { | |||
var initialImage = cardImages[0]; // Use the first image initially | |||
$('#article-content').html( | |||
'<p class="article-title">' + title + '</p>' + | |||
'<p class="article-type">' + type + '</p>' + | |||
'<div class="article-metadata">' + | |||
'<div class="article-metadata-column">' + | |||
'<p class="article-metadata-label">Entity</p>' + | |||
'<p class="article-metadata-value">' + entity + '</p>' + | |||
'</div>' + | |||
'<div class="article-metadata-column">' + | |||
'<p class="article-metadata-label">Discipline</p>' + | |||
'<p class="article-metadata-value">' + discipline + '</p>' + | |||
'</div>' + | |||
'<div class="article-metadata-column">' + | |||
'<p class="article-metadata-label">Subject(s)</p>' + | |||
'<p class="article-metadata-value">' + subject + '</p>' + | |||
'</div>' + | |||
'</div>' + | |||
'<div class="article-images">' + | |||
'<p class="article-label-image">Image(s)</p>' + | |||
'<div class="article-image">' + getImageHtml(initialImage) + '</div>' + | |||
'</div>' + | |||
(description ? '<p class="article-label-description">Description:</p>' + | |||
'<div class="article-description">' + formatParagraphs(description) + '</div>' : '') + | |||
(reflection ? '<p class="article-label-reflection">Reflection:</p>' + | |||
'<div class="article-reflection">' + formatParagraphs(reflection) + '</div>' : '') + | |||
(quote ? '<p class="article-label-quote">Quote:</p>' + | |||
'<div class="article-quote">“' + formatParagraphs(quote) + '”</div>' : '') + | |||
'<p class="article-label-modification-date">Added on</p>' + | |||
'<div class="article-modification-date">' + formatSimpleDate(modificationDate) + '</div>' | |||
); | |||
} | |||
function getImageHtml(image) { | function getImageHtml(image) { | ||
return '<div class="image-container">' + | |||
'<img src="' + image.src + '" alt="' + image.alt + '">' + | |||
'<div class="' + image.captionClass + '">' + image.caption + '</div>' + | |||
'</div>'; | |||
} | |||
function formatParagraphs(text) { | function formatParagraphs(text) { | ||
// Split the text into paragraphs and wrap each in a <span> | // Split the text into paragraphs and wrap each in a <span> | ||
Line 124: | Line 119: | ||
function setupImageToggle(images) { | function setupImageToggle(images) { | ||
var currentIndex = 0; | var currentIndex = 0; | ||
function toggleImage() { | function toggleImage() { | ||
currentIndex = (currentIndex + 1) % images.length; | currentIndex = (currentIndex + 1) % images.length; | ||
var image = images[currentIndex]; | var image = images[currentIndex]; | ||
$('#article-content').find('.article-image | var articleImageContainer = $('#article-content').find('.article-image'); | ||
articleImageContainer.html(getImageHtml(image)); | |||
} | } | ||
$('#article-content').on('click', '.article-image img', function () { | $('#article-content').on('click', '.article-image img', function () { | ||
toggleImage(); | toggleImage(); |