diff --git a/static/css/style.css b/static/css/style.css index a63e79c..c919547 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -220,10 +220,12 @@ html { height: 10rem; max-width: 20rem; min-width: 3rem; + transition: outline 0.3s ease, transform 0.3s ease; } .image_selected { - border: 1px solid var(--border); + outline: 1px solid var(--border); + transform: scale(1.05); } .image>a { diff --git a/static/js/imageviewer.js b/static/js/imageviewer.js index f13dfac..228f5fc 100644 --- a/static/js/imageviewer.js +++ b/static/js/imageviewer.js @@ -68,6 +68,14 @@ document.addEventListener('DOMContentLoaded', function() { function displayImage(index) { if (index < 0 || index >= imageList.length) return; + // Remove the `.image_selected` class from all images + imageList.forEach(img => { + const parentImageDiv = img.closest('.image'); + if (parentImageDiv) { + parentImageDiv.classList.remove('image_selected'); + } + }); + const imgElement = imageList[index]; const parentImageDiv = imgElement.closest('.image'); @@ -76,6 +84,9 @@ document.addEventListener('DOMContentLoaded', function() { return; } + // Add the `.image_selected` class to the currently displayed image + parentImageDiv.classList.add('image_selected'); + // Use the `data-full` attribute for the full image URL let fullImageUrl = imgElement.getAttribute('data-full') || imgElement.src; const title = imgElement.alt || 'Untitled'; @@ -123,6 +134,14 @@ document.addEventListener('DOMContentLoaded', function() { imagesContainer.classList.add('images_viewer_hidden'); document.body.classList.remove('viewer-open'); viewerOverlay.style.display = 'none'; + + // Remove `.image_selected` from all images + imageList.forEach(img => { + const parentImageDiv = img.closest('.image'); + if (parentImageDiv) { + parentImageDiv.classList.remove('image_selected'); + } + }); } // Navigation functions