Cat gallery tweaks
Today’s version of the cat gallery does not move photos around and automatically switches out the photo every five seconds. I’ve disabled clicking on photos to change the featured photo until I can add the improved version to my script.
View the code:
HTML and JS
<div class="code-block">
<div class="photo-grid">
<figure class="grid-photo featured">
<img class="loading-indicator no-js" src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 2" stroke="currentColor" stroke-dasharray="1,0.5"><path d="M1,1 5,1" /></svg>' data-src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6 2" stroke="currentColor" stroke-dasharray="1,0.5"><path d="M1,1 5,1" /></svg>' alt="Cute kitten" >
<noscript>
<img src="https://placekitten.com/600/600?image=1" alt="Cute kittens" >
</noscript>
<figcaption>adorable</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=2" alt="Cute kittens" >
<figcaption>cute as a button</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=3" alt="Cute kitten in snow" >
<figcaption>kitten playing in snow</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=4" alt="Cute kitten by door" >
<figcaption>letting itself in</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=5" alt="Cute kitten in a hand" >
<figcaption>adorable kitten in hand</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=6" alt="Cute kitten" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=7" alt="Cute kittens" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=8" alt="Cute kitten in snow" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=9" alt="Cute kitten by door" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=10" alt="Cute kitten in a hand" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=11" alt="Cute kitten" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=2" alt="Cute kittens" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=4" alt="Cute kitten in snow" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=6" alt="Cute kitten by door" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=8" alt="Cute kitten in a hand" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=10" alt="Cute kitten with cute face" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=2" alt="Cute kitten" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=1" alt="Cute kittens" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=7" alt="Cute kitten in snow" >
<figcaption>look at the cat(s)</figcaption>
</figure>
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=8" alt="Cute kitten in a hand" >
<figcaption>look at the cat(s)</figcaption>
</figure>
</div>
</div>
<script>
// ---------
// Variables
// ---------
let gridPhotos = [];
/* Functions */
function randomNum(minnum, maxnum) {
min = Math.ceil(minnum);
max = Math.floor(maxnum);
return Math.floor(Math.random() * (maxnum - minnum) + minnum);
}
// ---------
// Events
// ---------
window.onload = function () {
let gridPhotos = document.querySelectorAll('.grid-photo');
console.log(gridPhotos)
function initialPhoto() {
const initialFigure = document.getElementById(`grid-photo-${randomNum(1, gridPhotos.length)}`);
const figFeatured = document.querySelector('.featured');
figFeatured.innerHTML = initialFigure.innerHTML;
const imgFeatured = document.querySelector('.featured img');
imgFeatured.setAttribute('style','animation: featured 1s backwards;')
}
function updatePhoto() {
const newFeaturedFigure = document.getElementById(`grid-photo-${randomNum(1, gridPhotos.length)}`);
const figFeatured = document.querySelector('.featured');
figFeatured.innerHTML = newFeaturedFigure.innerHTML;
const imgFeatured = document.querySelector('.featured img');
imgFeatured.setAttribute('style','animation: featured 1s backwards;')
}
for (let i = 0; i < gridPhotos.length; i++) {
gridPhotos[i].setAttribute('id',`grid-photo-${[i]}`);
// document.querySelector(`#grid-photo-${[i]} img`).addEventListener('click', setPhoto);
}
let featured = '';
initialPhoto();
window.setInterval(updatePhoto, 5*1000);
}
</script>CSS
@supports (display: grid) {
.photo-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
max-width: 800px;
max-height: 800px;
grid-gap: 1rem;
gap: 1rem;
margin: 1rem auto;
overflow: hidden;
}
.photo-grid > * {
box-shadow: inset 0 0 1px black;
}
.photo-grid figure {
margin: 0;
padding: 0;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
place-items: center;
transition: all .125s ease-out;
}
.photo-grid figure > img {
width: 100%;
height: auto;
grid-column: 1 / 2;
grid-row: 1 / 2;
transition: transform .25s ease-out, clip-path .25s ease-out;
}
.photo-grid figure > figcaption {
grid-column: 1 / 2;
grid-row: 1 / 2;
padding: .5rem;
align-self: flex-end;
color: transparent;
transition: color 1s ease-out;
text-align: center;
}
.photo-grid figure:hover > figcaption {
color: black;
}
@keyframes featured {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes flash {
to {
opacity: 0;
}
}
.loading-indicator {
animation: flash 0.75s linear infinite;
}
.featured {
animation-name: featured;
animation-duration: .5s;
animation-iteration-count: 1;
animation-timing-function: ease-out;
grid-column: 2 / span 3;
grid-row: 2 / span 3;
}
}