added fallback mechanic to imageviewer.js
This commit is contained in:
parent
5881fa76e0
commit
d8ebe94657
3 changed files with 207 additions and 189 deletions
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue