4,114
edits
No edit summary |
No edit summary Tag: Reverted |
||
Line 20: | Line 20: | ||
// Update the fixed column content with card information | // Update the fixed column content with card information | ||
var entryNumber = $(this).find('.entry-number').text(); | |||
var title = $(this).find('.title').text(); | |||
var people = $(this).find('.people').text(); | |||
var type = $(this).find('.type').text(); | |||
var entity = $(this).find('.entity').text(); | |||
var discipline = $(this).find('.discipline').text(); | |||
var subject = $(this).find('.subject').text(); | |||
var description = $(this).find('.description').html(); | |||
var reflection = $(this).find('.reflection').html(); | |||
var quote = $(this).find('.quote').text(); | |||
var modificationDate = $(this).find('.modification-date').text(); | |||
var imageCount = 5; // Change this value based on the maximum number of images | |||
// Store image information in an array | |||
$('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + people + '</p>'); | var images = []; | ||
for (var i = 1; i <= imageCount; i++) { | |||
var image = { | |||
link: $(this).find('.image' + i + ' a').attr('href'), | |||
src: $(this).find('.image' + i + ' img').attr('src'), | |||
alt: $(this).find('.image' + i + ' img').attr('alt'), | |||
caption: $(this).find('.caption-image' + i).text() // Assuming caption is stored in a separate element | |||
}; | |||
images.push(image); | |||
} | |||
// Initial image to display | |||
var currentImageIndex = 0; | |||
// Update the fixed column content | |||
updateArticleContent(); | |||
function updateArticleContent() { | |||
$('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + people + '</p>'); | |||
$('#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(images[currentImageIndex]) + | |||
'<div class="caption-image">' + images[currentImageIndex].caption + '</div></div>' + | |||
'</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 '<a href="' + image.link + '" target="_blank"><img src="' + image.src + '" alt="' + image.alt + '"></a>'; | return '<a href="' + image.link + '" target="_blank"><img src="' + image.src + '" alt="' + image.alt + '"></a>'; | ||
} | } | ||
function formatParagraphs(text) { | |||
// Split the text into paragraphs and wrap each in a <span> | |||
var paragraphs = text.split('\n').filter(function (p) { return p.trim() !== '' }); | |||
return paragraphs.map(function (p) { return '<span>' + p.trim() + '</span>'; }).join(''); | |||
} | |||
function formatSimpleDate(inputDate) { | |||
// Remove spaces from the date string | |||
var dateWithoutSpaces = inputDate.replace(/\s/g, ''); | |||
// Assuming dateWithoutSpaces is in the format "XX XX XX" | |||
var formattedDate = dateWithoutSpaces.slice(0, 2) + '.' + dateWithoutSpaces.slice(2, 4) + '.' + dateWithoutSpaces.slice(4); | |||
return formattedDate; | |||
} | |||
// Toggle to the next image on click | |||
$('.article-image').on('click', function () { | |||
currentImageIndex = (currentImageIndex + 1) % images.length; | |||
updateArticleContent(); | |||
}); | |||
// Apply the fade-out effect to the #list element | // Apply the fade-out effect to the #list element |