@@ -22,13 +24,10 @@ document.addEventListener('DOMContentLoaded', function() {
close
-
-
-
![]()
-
+
+
![]()
+
-
View source:
Show source website
Show in fullscreen
@@ -36,7 +35,15 @@ document.addEventListener('DOMContentLoaded', function() {
`;
- const imageView = document.getElementById('image-viewer');
+ const imageView = viewerOverlay.querySelector('#image-viewer');
+ if (!imageView) {
+ console.error('imageView is null');
+ }
+
+ const imagesContainer = document.querySelector('.images');
+ if (!imagesContainer) {
+ console.error('imagesContainer is null');
+ }
function openImageViewer(element) {
initializeImageList(); // Update the image list
@@ -50,29 +57,31 @@ document.addEventListener('DOMContentLoaded', function() {
displayImage(currentIndex);
viewerOpen = true;
- viewerOverlay.style.display = 'flex';
+ imagesContainer.classList.remove('images_viewer_hidden');
+ document.body.classList.add('viewer-open');
+ viewerOverlay.style.display = 'block';
+
imageView.classList.remove('image_hide');
imageView.classList.add('image_show');
}
function displayImage(index) {
if (index < 0 || index >= imageList.length) return;
-
+
const imgElement = imageList[index];
const parentImageDiv = imgElement.closest('.image');
-
+
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;
+ // Get the source URL from the data-source attribute
+ const sourceUrl = imgElement.getAttribute('data-source');
// Fallback logic: if sourceUrl is null, use `data-proxy-full` or a meaningful default
const proxyFullUrl = imgElement.getAttribute('data-proxy-full') || fullImageUrl;
@@ -85,22 +94,16 @@ document.addEventListener('DOMContentLoaded', function() {
// 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');
-
- // Assign values to the viewer elements
- viewerImage.src = fullImageUrl; // Full-size image in the viewer
+
+ viewerImage.src = fullImageUrl;
viewerTitle.textContent = title;
-
- 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
+
+ fullSizeLink.href = sourceUrl || proxyFullUrl;
+ proxySizeLink.href = fullImageUrl;
}
- // Attach event listener to the document body
document.body.addEventListener('click', function(e) {
let target = e.target;
let clickableElement = target.closest('img.clickable, .img_title.clickable');
@@ -114,9 +117,12 @@ document.addEventListener('DOMContentLoaded', function() {
function closeImageViewer() {
imageView.classList.remove('image_show');
imageView.classList.add('image_hide');
- viewerOverlay.style.display = 'none';
viewerOpen = false;
currentIndex = -1;
+
+ imagesContainer.classList.add('images_viewer_hidden');
+ document.body.classList.remove('viewer-open');
+ viewerOverlay.style.display = 'none';
}
// Navigation functions
@@ -140,15 +146,19 @@ document.addEventListener('DOMContentLoaded', function() {
document.getElementById('viewer-next-button').addEventListener('click', showNextImage);
// Close viewer when clicking outside the image
- viewerOverlay.addEventListener('click', function(e) {
- if (e.target === viewerOverlay) {
- closeImageViewer();
+ document.addEventListener('click', function(e) {
+ if (viewerOpen) {
+ const target = e.target;
+ const clickedInsideViewer = viewerOverlay.contains(target) || target.closest('.image');
+ if (!clickedInsideViewer) {
+ closeImageViewer();
+ }
}
});
// Handle keyboard events for closing and navigation
document.addEventListener('keydown', function(e) {
- if (viewerOverlay.style.display === 'flex') {
+ if (viewerOpen) {
if (e.key === 'Escape') {
closeImageViewer();
} else if (e.key === 'ArrowLeft') {
@@ -157,5 +167,5 @@ document.addEventListener('DOMContentLoaded', function() {
showNextImage();
}
}
- });
+ });
});
diff --git a/templates/images.html b/templates/images.html
index 837d5ed..4eb9025 100755
--- a/templates/images.html
+++ b/templates/images.html
@@ -15,6 +15,7 @@
}
+