4,114
edits
No edit summary Tag: Reverted |
No edit summary Tag: Reverted |
||
Line 18: | Line 18: | ||
// Show the fixed column | // Show the fixed column | ||
showArticleWrapper.css('display', 'block'); | showArticleWrapper.css('display', 'block'); | ||
// Find all images within the clicked card | |||
var cardImages = []; | |||
for (var i = 1; i <= 5; i++) { | |||
var imageClass = '.image' + i; | |||
var imageElem = $(this).find(imageClass + ' img'); | |||
if (imageElem.length) { | |||
cardImages.push({ | |||
link: $(this).find(imageClass + ' a').attr('href'), | |||
src: imageElem.attr('src'), | |||
alt: imageElem.attr('alt'), | |||
caption: $(this).find('.caption' + imageClass).text() | |||
}); | |||
} | |||
} | |||
// Set up image toggle if more than one image is found | |||
if (cardImages.length > 1) { | |||
setupImageToggle(cardImages); | |||
} | |||
// Update the fixed column content with card information | // Update the fixed column content with card information | ||
Line 38: | Line 58: | ||
}; | }; | ||
// Update the fixed column content | |||
$('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + people + '</p>'); | $('#article-title').html('<p class="article-entry-number">' + entryNumber + '</p><p class="article-people">' + people + '</p>'); | ||
$('#article-content').html( | $('#article-content').html( | ||
Line 72: | Line 92: | ||
); | ); | ||
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>'; | ||
} | } | ||
Line 98: | Line 118: | ||
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 |