4,114
edits
No edit summary Tags: Manual revert Reverted |
No edit summary Tag: Manual revert |
||
Line 26: | Line 26: | ||
if (imageElem.length) { | if (imageElem.length) { | ||
cardImages.push({ | cardImages.push({ | ||
link: $(this).find(imageClass + ' a').attr('href'), | |||
src: imageElem.attr('src'), | src: imageElem.attr('src'), | ||
alt: imageElem.attr('alt'), | alt: imageElem.attr('alt'), | ||
caption: $(this).find('.caption' + imageClass).text() | caption: $(this).find('.caption' + imageClass).text() | ||
}); | }); | ||
} | } | ||
Line 40: | Line 40: | ||
// 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 people = $(this).find('.people').text(); | ||
var type = $(this).find('.type').text(); | var type = $(this).find('.type').text(); | ||
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(); | ||
var image = { | |||
$('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + people + '</p>'); | link: $(this).find('.image1 a').attr('href'), | ||
src: $(this).find('.image1 img').attr('src'), | |||
alt: $(this).find('.image1 img').attr('alt'), | |||
caption: $(this).find('.caption-image1').text() // Assuming caption is stored in a separate element | |||
}; | |||
// Update the fixed column content | |||
$('#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>' + | |||
(image.src ? '<div class="article-images">' + | |||
'<p class="article-label-image">Image(s)</p>' + | |||
'<div class="article-image">' + getImageHtml(image) + | |||
'<div class="caption-image">' + image.caption + '</div></div>' + | |||
'</div>' : '') + | |||
(description ? '<p class="article-label-description">Description:</p>' + | |||
'<div class="article-description">' + formatParagraphs(description) + '</div>' : '') + | '<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="caption">' + image.caption + '</div>' + | |||
'</div>'; | |||
} | |||
function formatParagraphs(text) { | function formatParagraphs(text) { | ||
Line 131: | Line 121: | ||
event.stopPropagation(); | event.stopPropagation(); | ||
}); | }); | ||
function setupImageToggle(images) { | |||
var currentIndex = 0; | |||
function toggleImage() { | |||
currentIndex = (currentIndex + 1) % images.length; | |||
var image = images[currentIndex]; | |||
$('#article-content').find('.article-image a').attr('href', image.link); | |||
$('#article-content').find('.article-image img').attr('src', image.src).attr('alt', image.alt); | |||
$('#article-content').find('.caption-image').text(image.caption); | |||
} | |||
// Attach click event to image for toggling | |||
$('#article-content').on('click', '.article-image img', function () { | |||
toggleImage(); | |||
}); | |||
} | |||
// Attach a mousedown event listener to close the fixed column | // Attach a mousedown event listener to close the fixed column |