added fallback mechanic to imageviewer.js

This commit is contained in:
partisan 2024-12-02 10:45:50 +01:00
parent 5881fa76e0
commit d8ebe94657
3 changed files with 207 additions and 189 deletions

View file

@ -57,27 +57,47 @@ document.addEventListener('DOMContentLoaded', function() {
function displayImage(index) {
if (index < 0 || index >= imageList.length) return;
const imgElement = imageList[index];
const parentImageDiv = imgElement.closest('.image');
const fullImageUrl = imgElement.getAttribute('data-full'); // Use data-full for the full image URL
const title = imgElement.alt || '';
const sourceUrl = parentImageDiv.querySelector('.img_source').href || '#'; // Source webpage URL
if (!parentImageDiv) {
console.warn('Parent image div not found');
return;
}
// Use the `data-full` attribute for the full image URL
let fullImageUrl = imgElement.getAttribute('data-full') || imgElement.src;
const title = imgElement.alt || 'Untitled';
// Gracefully handle the source URL or other attributes
const sourceElement = parentImageDiv.querySelector('.img_source');
const sourceUrl = sourceElement ? sourceElement.href : null;
// Fallback logic: if sourceUrl is null, use `data-proxy-full` or a meaningful default
const proxyFullUrl = imgElement.getAttribute('data-proxy-full') || fullImageUrl;
// Check if full image is missing, fallback to proxy size
if (fullImageUrl === '/static/images/missing.svg') {
fullImageUrl = proxyFullUrl;
}
// Elements in the viewer
const viewerImage = document.getElementById('viewer-image');
const viewerTitle = document.getElementById('viewer-title');
const viewerSourceButton = document.getElementById('viewer-source-button');
const fullSizeLink = document.getElementById('viewer-full-size-link');
const proxySizeLink = document.getElementById('viewer-proxy-size-link');
const viewerImageLink = document.getElementById('viewer-image-link');
// Set the viewer image to the full image URL
viewerImage.src = fullImageUrl;
// Assign values to the viewer elements
viewerImage.src = fullImageUrl; // Full-size image in the viewer
viewerTitle.textContent = title;
viewerSourceButton.href = sourceUrl;
fullSizeLink.href = sourceUrl; // Link to the source website
proxySizeLink.href = fullImageUrl; // Link to the proxied full-size image
viewerImageLink.href = fullImageUrl; // Make image clickable to open in new tab
viewerSourceButton.href = sourceUrl || proxyFullUrl; // Use proxy URL if source is missing
fullSizeLink.href = sourceUrl || proxyFullUrl; // Link to source website or proxy
proxySizeLink.href = fullImageUrl; // Link to the proxied full-size image
viewerImageLink.href = fullImageUrl; // Make image clickable to open in a new tab
}
// Attach event listener to the document body