galleri: Support .thumbnails
This commit is contained in:
parent
47647a7f8b
commit
97e4b607b0
|
@ -51,11 +51,9 @@ main {
|
|||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
/* #region modal */
|
||||
|
||||
.modal-target:hover {opacity: 0.7;}
|
||||
|
||||
/* The Modal (background) */
|
||||
/* Modal Background */
|
||||
.modal {
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed; /* Stay in place */
|
||||
|
@ -70,14 +68,12 @@ main {
|
|||
background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
|
||||
}
|
||||
|
||||
/* Modal Content (image) */
|
||||
.modal-content {
|
||||
margin: auto;
|
||||
display: block;
|
||||
object-fit: scale-down;
|
||||
overflow: visible;
|
||||
|
||||
/* yolo, it all goes down from here */
|
||||
min-width: 60vw;
|
||||
max-width: 90vw !important;
|
||||
min-height: 60vh;
|
||||
|
@ -88,7 +84,6 @@ main {
|
|||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
/* Caption of Modal Image */
|
||||
.modal-caption {
|
||||
margin: auto;
|
||||
display: block;
|
||||
|
@ -133,9 +128,7 @@ main {
|
|||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* #endregion modal */
|
||||
|
||||
/* #region screen-size media-rules */
|
||||
@media only screen and (min-width:320px) {
|
||||
.gallery-container { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
|
||||
main { padding: 1em; }
|
||||
|
@ -150,4 +143,3 @@ main {
|
|||
@media only screen and (min-width: 1281px) {
|
||||
.gallery-container { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
|
||||
}
|
||||
/* #endregion */
|
|
@ -43,7 +43,7 @@ function getDirContents($dir, &$results = array()) {
|
|||
if (in_array($ext, $GLOBALS["allowedExtensions"])) {
|
||||
$results[] = $cleanPath;
|
||||
}
|
||||
} else if ($value != "." && $value != "..") {
|
||||
} else if ($value != "." && $value != ".." && $value != ".thumbnails") {
|
||||
//recursively scan directories
|
||||
getDirContents($path, $results);
|
||||
}
|
||||
|
@ -55,7 +55,7 @@ $images = getDirContents($galleryDir);
|
|||
$imageTemplate = '
|
||||
<div class="card">
|
||||
<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 class="card-body">
|
||||
<p class="card-title">%realname</p>
|
||||
|
@ -108,6 +108,7 @@ $imageTemplate = '
|
|||
"%timestamp" => filemtime($galleryDir . $value),
|
||||
"%name" => htmlspecialchars($displaypath),
|
||||
"%path" => $serverPath . $value,
|
||||
"%thumbnail" => $serverPath . "/.thumbnails" . $value . ".png",
|
||||
"%realname" => htmlspecialchars($realname)
|
||||
];
|
||||
echo strtr($imageTemplate, $vars);
|
||||
|
|
|
@ -1,22 +1,17 @@
|
|||
// #region Modal
|
||||
var modal = document.getElementById('modal');
|
||||
const modal = document.getElementById('modal');
|
||||
const modalImg = document.getElementById("modal-content");
|
||||
const captionText = document.getElementById("modal-caption");
|
||||
|
||||
// global handler
|
||||
document.addEventListener('click', function (e) {
|
||||
if (e.target.className.indexOf('modal-target') !== -1) {
|
||||
var img = e.target;
|
||||
var modalImg = document.getElementById("modal-content");
|
||||
var captionText = document.getElementById("modal-caption");
|
||||
// Open modal
|
||||
const img = e.target;
|
||||
modal.style.display = "block";
|
||||
modalImg.src = img.src;
|
||||
modalImg.src = img.dataset.fullsrc;
|
||||
captionText.innerHTML = img.alt;
|
||||
} else if (modal.style.display != "none") {
|
||||
// Close modal
|
||||
modal.style.display = "none";
|
||||
modalImg.src = "";
|
||||
}
|
||||
});
|
||||
// #endregion
|
||||
|
||||
// #region sorting
|
||||
|
||||
|
||||
// #endregion
|
Loading…
Reference in New Issue