nonshy/website
nonshy/website
1
0
Fork 0
Code Issues 21 Pull Requests 1 Packages Projects Releases Wiki Activity

Better photo scaling without scroll in lightbox modal

Browse Source
This commit is contained in:
Noah Petherbridge 2024-03-07 18:10:29 -08:00
parent 80c4471017
commit be9276f4c0
2 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/static/css/theme.css
View File

@ -46,9 +46,16 @@ img {
/* Photo modals in addition to Bulma .modal-content */
.photo-modal {
width: auto !important;
max-width: fit-content;
max-height: fit-content;
width: calc(100vw - 40px);
max-height: calc(100vh - 40px);
}
.photo-modal #detailImg {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.photo-modal img {
max-height: calc(100vh - 50px);
}
/* Custom bulma tag colors */

14
web/templates/photo/gallery.html
View File

@ -169,8 +169,12 @@
<div class="modal" id="detail-modal">
<div class="modal-background"></div>
<div class="modal-content photo-modal">
<div class="image is-fullwidth">
<img id="detailImg">
<!-- Notes: to get the image to always scale and fit on screen, it is made as a background image in CSS
on the detailImg div; but we don't have the image's minimum size here, so the hidden <img> inside
provides the size pushing to make it visible on screen, otherwise the divs are 0x0 pixels and nothing
would be visible. -->
<div id="detailImg">
<img style="visibility: hidden">
</div>
</div>
<button class="modal-close is-large" aria-label="close"></button>
@ -755,8 +759,10 @@
});
});
function setModalImage(url) {
let $modalImg = document.querySelector("#detailImg");
$modalImg.src = url;
let $modalImg = document.querySelector("#detailImg"),
$img = $modalImg.getElementsByTagName("img")[0];
$img.src = url;
$modalImg.style.backgroundImage = `url(${url})`;
return false;
}
</script>