sam
/
minimalistic-wallpaper-collection
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(site): Gallery url for each image

This commit is contained in:
Jonah Lawrence 2022-01-10 15:55:35 -07:00
parent 7ee295e7e2
commit 716d1beaf9
No known key found for this signature in database
GPG Key ID: 613851A667DC08A3
1 changed files with 47 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
index.php
View File

@ -140,7 +140,7 @@ if (isset($_GET['random'])) {
</svg> </svg>
</a> </a>
<!-- Gallery --> <!-- Gallery -->
<a href="javascript:document.querySelector('.gallery img').click()" title="Gallery"> <a href="#gallery" title="Gallery">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="2em" xmlns="http://www.w3.org/2000/svg"> <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="2em" xmlns="http://www.w3.org/2000/svg">
<path d="M7 19h10V4H7v15zm-5-2h4V6H2v11zM18 6v11h4V6h-4z"></path> <path d="M7 19h10V4H7v15zm-5-2h4V6H2v11zM18 6v11h4V6h-4z"></path>
</svg> </svg>
@ -156,7 +156,7 @@ if (isset($_GET['random'])) {
<div class="gallery"> <div class="gallery">
<?php foreach ($images as $image) : ?> <?php foreach ($images as $image) : ?>
<?php $dimensions = getimagesize($image); ?> <?php $dimensions = getimagesize($image); ?>
<a href="<?= $image; ?>" class="glightbox" data-description="<?= basename($image); ?> • <?= $dimensions[0] . 'x' . $dimensions[1]; ?>"> <a href="<?= $image; ?>" class="glightbox" data-alt="<?= basename($image); ?>" data-description="<?= basename($image); ?> • <?= $dimensions[0] . 'x' . $dimensions[1]; ?>">
<img src="<?= $imgproxy_prefix . basename($image); ?>" loading="lazy" alt="<?= basename($image); ?>" title="<?= basename($image); ?>"> <img src="<?= $imgproxy_prefix . basename($image); ?>" loading="lazy" alt="<?= basename($image); ?>" title="<?= basename($image); ?>">
</a> </a>
<?php endforeach; ?> <?php endforeach; ?>
@ -168,13 +168,52 @@ if (isset($_GET['random'])) {
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
// iniitialize glightbox window.addEventListener("load", function() {
const lightbox = GLightbox(); /**
* Open image based on hash
*
* If the hash is "gallery", open the first image in the gallery,
* otherwise, open the image with the hash as the alt attribute.
*/
function openImageFromHash() {
const hash = window.location.hash.substr(1);
const query = hash === "gallery" ? ".gallery img" : `.gallery img[alt="${hash}"]`;
const imageElement = document.querySelector(query);
if (imageElement) {
imageElement.click();
}
}
// if imgproxy version fails to load, fallback to full-size image // initialize glightbox
document.querySelectorAll(".gallery img").forEach(function(img) { const lightbox = GLightbox();
img.addEventListener("error", function() {
this.src = this.parentElement.href; // if imgproxy version fails to load, fallback to full-size image
document.querySelectorAll(".gallery img").forEach(function(img) {
img.addEventListener("error", function() {
this.src = this.parentElement.href;
});
});
// add hash to url when image is opened
lightbox.on("slide_changed", function(slide) {
window.location.hash = slide.current.slideConfig.alt;
});
// remove hash from url when image is closed
lightbox.on("close", function() {
history.replaceState(null, null, window.location.pathname);
});
// if hash is set, open image
if (window.location.hash) {
openImageFromHash();
}
// if hash is changed and lightbox is closed, open image
window.addEventListener("hashchange", function() {
if (!lightbox.lightboxOpen) {
openImageFromHash();
}
}); });
}); });
</script> </script>