Iterating through cats and JavaScript
The automatic switching of featured photos has been added and it appears to work well even after clicking on an image. I hadn’t check the last two versions of this post in Safari and I’ve applied my CSS fixes to this version. Next I’m going to improve how this works and make sure the layout and order of images is maintained as the images are swapped in and out of the featured area. Adding functionality to start and stop the timer will also be added in the final version. This has been fun and I’m looking forward to adding this to my site.
View the code:
HTML and JS
<div class="code-block">
<div class="photo-grid">
<figure class="grid-photo">
<img src="https://placekitten.com/600/600?image=1" alt="Cute kitten" >
<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 setPhoto() {
for (let i = 0; i < gridPhotos.length; i++) {
if(gridPhotos[i].getAttribute('class') === "grid-photo featured") {
console.log('identified');
gridPhotos[i].classList = "grid-photo";
}
}
this.classList.add("featured");
}
for (let i = 0; i < gridPhotos.length; i++) {
gridPhotos[i].setAttribute('id',`grid-photo-${[i]}`);
document.querySelector(`#grid-photo-${[i]}`).addEventListener('click', setPhoto);
}
let featured = '';
function choosePhoto() {
for (let i = 0; i < gridPhotos.length; i++) {
if(gridPhotos[i].getAttribute('class') === "grid-photo featured") {
console.log('identified');
gridPhotos[i].classList = "grid-photo";
featured = 'false';
}
};
let randomPhotoId = `grid-photo-${randomNum(0, gridPhotos.length)}`;
const randomPhoto = document.getElementById(randomPhotoId);
let photoClasses = randomPhoto.classList;
photoClasses.add('featured');
featured = 'true';
loaded = 'true';
}
choosePhoto();
window.setInterval(choosePhoto, 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;}
}
.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;
}
}