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

45
index.php
View File

@ -140,7 +140,7 @@ if (isset($_GET['random'])) {
</svg>
</a>
<!-- 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">
<path d="M7 19h10V4H7v15zm-5-2h4V6H2v11zM18 6v11h4V6h-4z"></path>
</svg>
@ -156,7 +156,7 @@ if (isset($_GET['random'])) {
<div class="gallery">
<?php foreach ($images as $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); ?>">
</a>
<?php endforeach; ?>
@ -168,7 +168,23 @@ if (isset($_GET['random'])) {
</div>
<script type="text/javascript">
// iniitialize glightbox
window.addEventListener("load", function() {
/**
* 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();
}
}
// initialize glightbox
const lightbox = GLightbox();
// if imgproxy version fails to load, fallback to full-size image
@ -177,6 +193,29 @@ if (isset($_GET['random'])) {
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>
</body>