Added zoom and fixed imports

This commit is contained in:
123a456b789c 2024-03-30 19:54:14 +01:00
parent b98f901651
commit 9c86ee8881
4 changed files with 23 additions and 3 deletions

View File

@ -75,7 +75,7 @@ app.get('/pic/:folder/:pic', (req, res) => {
exif = exifData;
exif.exif.ExposureTime = "1/" + Math.round(1/exif.exif.ExposureTime);
exif.exif.FNumber = "f/" + exif.exif.FNumber;
img = `<img src="/${folder}/${pic}" style="width: 70%; height: auto;">`;
img = `<img id="${btoa(pic)}" onclick="zoom('${btoa(pic)}')" src="/${folder}/${pic}" style="width: 70%; height: auto;">`;
res.render('pic', { folder: folder, pic: pic, exif: exif, img: img });
return
}

19
src/zoomImage.js Normal file
View File

@ -0,0 +1,19 @@
window.fullScreen = false;
function zoom(id) {
if (window.fullScreen == false) {
var img = document.getElementById(id);
img.style.width = "95%";
img.style.height = "auto";
img.style.position = "fixed";
img.style.top = "0px";
window.fullScreen = true;
}
else {
var img = document.getElementById(id);
img.style.width = "70%";
img.style.height = "auto";
img.style.position = "relative";
window.fullScreen = false;
}
}

View File

@ -6,7 +6,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans&family=Reddit+Mono:wght@200..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="master.css">
<link rel="stylesheet" href="../master.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<title>Folder</title>
</head>

View File

@ -6,7 +6,8 @@
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pixelify+Sans&family=Reddit+Mono:wght@200..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="master.css">
<link rel="stylesheet" href="../../../master.css">
<script src="../../../zoomImage.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
<title>Folder</title>
</head>