Spitfire/Search
Spitfire/Search
1
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

added cool effect for selected image in image results page

Browse source
This commit is contained in:
partisan 2024-12-04 08:21:48 +01:00
parent 90967ede93
commit 8f2c0d45f8
2 changed files with 22 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
static/css/style.css
View file

@ -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 {

19
static/js/imageviewer.js
View file

@ -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