Additional tweaks to my lightbox
I wanted to improve the transition for the lightbox and try out using backdrop-filter with it to see how it might look. I think I have a solid starting point to use this within my website for photo gallery pages, but I’ll have to see how things look and feel once I give it a try.
View the code:
HTML and JS
<div class="code-block">
<div class="photo-grid">
<a href="https://jeremycaudle.com/ygg/resources/495fff39-427c-4d04-8769-68c09d294aeb.jpeg" class="lightbox-url" ><img src="https://jeremycaudle.com/ygg/resources/495fff39-427c-4d04-8769-68c09d294aeb.jpeg" class="lightbox-img" width="640" height="341" alt="Statue of Santoku"></a>
<a href="https://jeremycaudle.com/ygg/resources/onebitme.png" class="lightbox-url"><img src="https://jeremycaudle.com/ygg/resources/onebitme.png" class="lightbox-img" width="480" height="389" alt="Goofy man holding up his hand."></a>
<p id="lightbox-status-message"></p>
</div>
</div>
<div id="lightbox" class="hidden">
<img id="lightbox-img" src="" alt="">
<button id="lightbox-button">Close</button>
</div>
<script>
// ---------
// Variables
// ---------
const lightboxMessage = document.getElementById('lightbox-status-message');
const lightbox = document.getElementById('lightbox');
const lightboxIMG = document.getElementById('lightbox-img');
const lightboxCaption = document.getElementById('lightbox-caption');
const lightboxButton = document.getElementById('lightbox-button');
const lightboxImgs = [];
const lightboxURLs = [];
let bodyElems = document.getElementsByTagName('html');
let bodyElem = bodyElems[0];
console.log(bodyElem)
// ---------
// Functions
// ---------
function showLightbox(e) {
lightbox.setAttribute('class', '');
lightbox.style.visibility = 'visible';
lightbox.style.opacity = '1';
console.log('Show lightbox.');
lightboxIMG.setAttribute('src', this.getAttribute('data-url'));
bodyElem.setAttribute('class','lightbox-enabled');
}
function hideLightbox(e) {
lightbox.setAttribute('class', 'hidden');
lightbox.style.opacity = '0';
console.log('Hide lightbox.');
lightboxIMG.setAttribute('src', '');
bodyElem.className = '';
lightbox.style.visibility = 'hidden';
}
// ---------
// Events
// ---------
window.onload = function () {
const lightboxImgs = document.getElementsByClassName('lightbox-img');
const lightboxURLs = document.getElementsByClassName('lightbox-url');
lightboxMessage.textContent = `Click on the images above to see larger versions.`;
for (let i = 0; i < lightboxURLs.length; i++) {
lightboxURLs[i].setAttribute('data-url',lightboxURLs[i].getAttribute('href'));
lightboxURLs[i].setAttribute('href','#');
lightboxURLs[i].setAttribute('id',`lightbox-link-${[i]}`);
document.querySelector(`#lightbox-link-${[i]}`).addEventListener('click', showLightbox);
}
for (let i = 0; i < lightboxImgs.length; i++) {
lightboxImgs[i].getAttribute('data-url');
lightboxImgs[i].style.boxShadow = "3px 3px 6px 0 rgba(0,0,0,.25)";
lightboxImgs[i].style.backgroundColor = "white";
}
};
lightboxButton.addEventListener('click', hideLightbox);
</script>CSS
.code-block {
background-color: #777;
}
#lightbox.hidden {
}
#lightbox img {
background-color: white;
box-shadow: 0 0 1rem 0 rgba(0,0,0,.2);
}
#lightbox button {
background: transparent;
border: solid white 3px;
color: white;
display: block;
width: 7em;
margin: 1rem auto;
cursor: pointer;
}
#lightbox button:hover, #lightbox button:focus {
color: orange;
border-color: orange;
}
.lightbox-enabled {
overflow: hidden;
}
@supports (display: grid) {
.photo-grid {
display: grid;
place-items: center;
width: 100%;
max-width: 30em;
margin: 1rem auto;
padding: 1rem;
background-color: #777;
gap: 1rem;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 3rem;
height: auto;
}
.photo-grid a {
display: block;
width: 100%;
height: 100%;
}
.photo-grid img {
object-fit: fill;
max-width: 100%;
height: auto;
}
.photo-grid p {
margin: 0;
font-family: Helvetica, Arial, sans-serif;
grid-column: 1 / span 2;
color: orange;
padding: 1rem 0;
}
#lightbox {
display: grid;
width: 100%;
height: 100%;
overflow:hidden;
position: absolute;
top: 0;
left: 0;
place-items: center;
background-color: #333333;
opacity: 0;
transition: opacity .33s ease-out;
visibility: hidden;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
grid-template-rows: min-content, 1fr;
}
#lightbox img {
max-width: calc(100% - 2rem);
margin: 0 auto;
align-self: flex-end;
}
#lightbox button {
align-self:flex-start;
}
}