Projects/nettsiden
Projects
/
nettsiden
8
2
Fork 0
Code Issues 15 Pull Requests 2 Activity

galleri: Support .thumbnails

This commit is contained in:
Felix Albrigtsen 2024-04-07 01:50:31 +02:00 committed by h7x4
parent a205a77e47
commit 89050016d3
Signed by: oysteikt
GPG Key ID: 9F2F7D8250F35146
3 changed files with 12 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
www/css/gallery.css
View File

@ -51,11 +51,9 @@ main {
font-size: 1.5em; font-size: 1.5em;
} }
/* #region modal */
.modal-target:hover {opacity: 0.7;} .modal-target:hover {opacity: 0.7;}
/* The Modal (background) */ /* Modal Background */
.modal { .modal {
display: none; /* Hidden by default */ display: none; /* Hidden by default */
position: fixed; /* Stay in place */ position: fixed; /* Stay in place */
@ -70,14 +68,12 @@ main {
background-color: rgba(0,0,0,0.8); /* Black w/ opacity */ background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
} }
/* Modal Content (image) */
.modal-content { .modal-content {
margin: auto; margin: auto;
display: block; display: block;
object-fit: scale-down; object-fit: scale-down;
overflow: visible; overflow: visible;
/* yolo, it all goes down from here */
min-width: 60vw; min-width: 60vw;
max-width: 90vw !important; max-width: 90vw !important;
min-height: 60vh; min-height: 60vh;
@ -88,7 +84,6 @@ main {
opacity: 1 !important; opacity: 1 !important;
} }
/* Caption of Modal Image */
.modal-caption { .modal-caption {
margin: auto; margin: auto;
display: block; display: block;
@ -133,9 +128,7 @@ main {
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
} }
/* #endregion modal */
/* #region screen-size media-rules */
@media only screen and (min-width:320px) { @media only screen and (min-width:320px) {
.gallery-container { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; } .gallery-container { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
main { padding: 1em; } main { padding: 1em; }
@ -150,4 +143,3 @@ main {
@media only screen and (min-width: 1281px) { @media only screen and (min-width: 1281px) {
.gallery-container { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .gallery-container { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
} }
/* #endregion */

5
www/galleri/index.php
View File

@ -43,7 +43,7 @@ function getDirContents($dir, &$results = array()) {
if (in_array($ext, $GLOBALS["allowedExtensions"])) { if (in_array($ext, $GLOBALS["allowedExtensions"])) {
$results[] = $cleanPath; $results[] = $cleanPath;
} }
} else if ($value != "." && $value != "..") { } else if ($value != "." && $value != ".." && $value != ".thumbnails") {
//recursively scan directories //recursively scan directories
getDirContents($path, $results); getDirContents($path, $results);
} }
@ -55,7 +55,7 @@ $images = getDirContents($galleryDir);
$imageTemplate = ' $imageTemplate = '
<div class="card"> <div class="card">
<div class="card-image-div"> <div class="card-image-div">
<img src="%path" alt="%name" class="card-image modal-target"> <img src="%thumbnail" data-fullsrc="%path" alt="%name" class="card-image modal-target">
</div> </div>
<div class="card-body"> <div class="card-body">
<p class="card-title">%realname</p> <p class="card-title">%realname</p>
@ -108,6 +108,7 @@ $imageTemplate = '
"%timestamp" => filemtime($galleryDir . $value), "%timestamp" => filemtime($galleryDir . $value),
"%name" => htmlspecialchars($displaypath), "%name" => htmlspecialchars($displaypath),
"%path" => $serverPath . $value, "%path" => $serverPath . $value,
"%thumbnail" => $serverPath . "/.thumbnails" . $value . ".png",
"%realname" => htmlspecialchars($realname) "%realname" => htmlspecialchars($realname)
]; ];
echo strtr($imageTemplate, $vars); echo strtr($imageTemplate, $vars);

21
www/js/galleri.js
View File

@ -1,22 +1,17 @@
// #region Modal const modal = document.getElementById('modal');
var modal = document.getElementById('modal'); const modalImg = document.getElementById("modal-content");
const captionText = document.getElementById("modal-caption");
// global handler
document.addEventListener('click', function (e) { document.addEventListener('click', function (e) {
if (e.target.className.indexOf('modal-target') !== -1) { if (e.target.className.indexOf('modal-target') !== -1) {
var img = e.target; // Open modal
var modalImg = document.getElementById("modal-content"); const img = e.target;
var captionText = document.getElementById("modal-caption");
modal.style.display = "block"; modal.style.display = "block";
modalImg.src = img.src; modalImg.src = img.dataset.fullsrc;
captionText.innerHTML = img.alt; captionText.innerHTML = img.alt;
} else if (modal.style.display != "none") { } else if (modal.style.display != "none") {
// Close modal
modal.style.display = "none"; modal.style.display = "none";
modalImg.src = "";
} }
}); });
// #endregion
// #region sorting
// #endregion