Skip to content

Image Gallery Demo #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

Image Gallery Demo #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
815781e
Inital Image Gallery, no images
jamesnw Oct 6, 2025
46a2ea3
gallery images
stacyk Oct 7, 2025
1568605
Add alt text, credits
jamesnw Oct 9, 2025
b4c4f96
clean up styles, mostly in dialog layotu
stacyk Oct 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added src/image-gallery/images/gallery-1.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/image-gallery/images/gallery-10.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/image-gallery/images/gallery-11.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/image-gallery/images/gallery-12.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/image-gallery/images/gallery-13.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/image-gallery/images/gallery-14.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/image-gallery/images/gallery-15.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/image-gallery/images/gallery-16.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/image-gallery/images/gallery-17.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/image-gallery/images/gallery-18.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/image-gallery/images/gallery-2.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/image-gallery/images/gallery-3.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/image-gallery/images/gallery-4.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/image-gallery/images/gallery-5.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/image-gallery/images/gallery-6.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/image-gallery/images/gallery-7.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/image-gallery/images/gallery-8.avif
View file
Open in desktop
Binary file not shown.
Binary file added src/image-gallery/images/gallery-9.avif
View file
Open in desktop
Binary file not shown.
119 changes: 119 additions & 0 deletions src/image-gallery/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Baseline Zoo</title>
<link rel="stylesheet" href="./style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Varta:[email protected]&display=swap"
rel="stylesheet"
/>
</head>
<body>
<main>
<ul class="gallery">
<li data-item>
<img data-img src="./images/gallery-1.avif" alt="A small fluffy white cloud of a dog on green grass." />
<button class="show">Say hi to <span>Mochi</span></button>
<p class="credit" hidden>Mochi - Photo by author</p>
</li>
<li data-item>
<img data-img src="./images/gallery-2.avif" alt="Two small brown dogs wearing adorable red hair ribbons." />
<button class="show">Say hi to <span>Sisters</span></button>
<p class="credit" hidden>Mochi - Photo by author</p>
</li>
<li data-item>
<img data-img src="./images/gallery-3.avif" alt="A profile headshot of a blue macaw with a striking yellow chest." />
<button class="show">Say hi to <span>Mr. Macaw</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@imandrewpons?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Andrew Pons</a> on <a href="https://unsplash.com/photos/close-up-of-a-yellow-and-blue-macaw-lylCw4zcA7I?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="./images/gallery-4.avif" alt="A kingfisher with a long black beak and irridescent blue feathers." />
<button class="show">Say hi to <span>Chirp</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@borisworkshop?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Boris Smokrovic</a> on <a href="https://unsplash.com/photos/blue-and-brown-bird-on-brown-tree-trunk-DPXytK8Z59Y?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="./images/gallery-5.avif" alt="A dour looking pug in a yellow raincoat." />
<button class="show">Say hi to <span>Grumps</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@charlesdeluvio?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">charlesdeluvio</a> on <a href="https://unsplash.com/photos/adult-black-puppy-in-yellow-raincoat-lJJlaUWYrPE?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="./images/gallery-6.avif" alt="A strikingly pink flamingo preens their feathers against a blue sky." />
<button class="show">Say hi to <span>Flambe</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@edrxckk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Edrick Krozendijk</a> on <a href="https://unsplash.com/photos/pink-flamingo-in-close-up-photography-25JxltstHSc?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="./images/gallery-7.avif" alt="A Plumbeous Water Redstart, which is a small blue bird with a red tail, eyes the camera warily." loading="lazy" />
<button class="show">Say hi to <span>Sassy</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@deepaknautiyal?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Deepak Nautiyal</a> on <a href="https://unsplash.com/photos/blue-and-red-bird-during-daytime-Nbv7PkL_rvI?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="./images/gallery-8.avif" alt="Four sheep stand in a field looking straight at the camera." loading="lazy" />
<button class="show">Say hi to <span>Meh</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@judithprins?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Judith Prins</a> on <a href="https://unsplash.com/photos/four-lambs-on-ground-AJa7S1fjy-I?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="./images/gallery-9.avif" alt="A polar bear stands and waves with endless ice behind them." loading="lazy" />
<button class="show">Say hi to <span>Bob</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@hansjurgen007?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Hans-Jurgen Mager</a> on <a href="https://unsplash.com/photos/polar-bear-on-snow-covered-ground-during-daytime-qQWV91TTBrE?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="./images/gallery-10.avif" alt="A giraffe towers over the camera, with the long neck extending out of the frame." loading="lazy" />
<button class="show">Say hi to <span>Hank</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@jeremiahdelmar?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Jeremiah Del Mar</a> on <a href="https://unsplash.com/photos/brown-giraffe-under-blue-sky-during-daytime-6wEM5ZJWVDQ?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="./images/gallery-11.avif" alt="A dust-covered rhinocerous walks through a dust-covered landscape." loading="lazy" />
<button class="show">Say hi to <span>Buddy</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@rhino007?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Keith Markilie</a> on <a href="https://unsplash.com/photos/adult-rhinosaurus-jBjQA3LU9Dc?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="./images/gallery-12.avif" alt="A Lilac-breasted Roller, which is a multicolored small bird, perches on a stick." loading="lazy" />
<button class="show">Say hi to <span>Bwird</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@davidclode?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">David Clode</a> on <a href="https://unsplash.com/photos/shallow-focus-photography-of-multi-colored-bird-7_TTPznVIQI?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="./images/gallery-13.avif" alt="A hedgehog wears a small plastic crown." loading="lazy" />
<button class="show">Say hi to <span>Quill</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@hedgehog90?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Liudmyla Denysiuk</a> on <a href="https://unsplash.com/photos/brown-hedgehog-iJ9o00UeAWk?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="./images/gallery-14.avif" alt="An orange clownfish with a white strip peers out from purple anemone" loading="lazy" />
<button class="show">Say hi to <span>Bubble</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@davidclode?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">David Clode</a> on <a href="https://unsplash.com/photos/clown-fish-in-purple-and-white-coral-reef-Gv-Cx3_clZ4?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="./images/gallery-15.avif" alt="A tiny green and orange frog and huge eyes desperately clings to the top of a flower bud." loading="lazy" />
<button class="show">Say hi to <span>Greg</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@sleblanc01?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Stephanie LeBlanc</a> on <a href="https://unsplash.com/photos/green-frog-on-red-post-SVwOposMxHY?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="./images/gallery-16.avif" alt="A brown sea turtle with white lines in a cellular pattern on their flippers swims through a blue ocean." loading="lazy" />
<button class="show">Say hi to <span>Flash</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@wexor?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Wexor Tmg</a> on <a href="https://unsplash.com/photos/brown-turtle-swimming-underwater-L-2p8fapOA8?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="./images/gallery-17.avif" alt="Two puffins sit on a cliff amongst purple and white clover." loading="lazy" />
<button class="show">Say hi to <span>Peg & Jax</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@wwwynand?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Wynand van Poortvliet</a> on <a href="https://unsplash.com/photos/two-black-and-white-birds-4AmyOdXZAQc?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
<li data-item>
<img data-img src="./images/gallery-18.avif" alt="A fluffy little white dark peeks out from a leafy plant." loading="lazy" />
<button class="show">Say hi to <span>Frank</span></button>
<p class="credit" hidden>Photo by <a href="https://unsplash.com/@alvannee?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Alvan Nee</a> on <a href="https://unsplash.com/photos/short-coat-beige-puppy-behind-green-leaves-CfDAo3C3bvQ?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank" rel="noreferrer">Unsplash</a></p>
</li>
</ul>

<dialog id="dialog">
<button class="close">close</button>
<img id="dialog-image" src="" />
<p id="dialog-credit"></p>
</dialog>
</main>

<script src="./script.js"></script>
</body>
</html>
24 changes: 24 additions & 0 deletions src/image-gallery/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
const dialogElem = document.getElementById("dialog");
const dialogImageElem = document.getElementById("dialog-image");
const dialogCreditElem = document.getElementById("dialog-credit");
const showBtns = document.querySelectorAll(".show");
const closeBtn = document.querySelector(".close");

[...showBtns].forEach((showBtn) => {
showBtn.addEventListener("click", (event) => {
const listItem = event.currentTarget.closest("li");

const creditHTML = listItem.querySelector(".credit").innerHTML;
dialogCreditElem.innerHTML = creditHTML;

const imgSrc = listItem.querySelector("img").getAttribute("src");
dialogImageElem.setAttribute("src", imgSrc);
dialogImageElem.addEventListener("load", () => {
dialogElem.showModal();
});
});
});

closeBtn.addEventListener("click", () => {
dialogElem.close();
});
196 changes: 196 additions & 0 deletions src/image-gallery/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
.gallery {
display: grid;
gap: 0.2em;
grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
}

dialog {
--btn-bg-color: var(--color-base);

background-color: transparent;
border: thin;
max-block-size: 80vh;
max-inline-size: 80vw;
opacity: var(--dialog-opacity, 0);
padding: 0;
scale: var(--dialog-scale, 0);

@media (prefers-reduced-motion: reduce) {
--dialog-scale: 1;
}

transition: display var(--fast) var(--ease) allow-discrete,
opacity var(--fast) var(--ease),
overlay var(--fast) var(--ease) allow-discrete,
scale var(--fast) var(--ease);

&::backdrop {
background-color: var(--backdrop-bg, oklch(0.2 0.6 200 / 0.8));
opacity: var(--dialog-opacity, 0);
transition: background-color var(--fast), display var(--fast) allow-discrete,
opacity var(--fast), overlay var(--fast) allow-discrete;
}

&[open] {
--dialog-opacity: 1;
--dialog-scale: 1;

display: grid;
grid-template:
'dialog-close' auto
'dialog-image' auto
'dialog-credit' auto / 1fr;
}

@starting-style {
&[open] {
--dialog-opacity: 0;
--dialog-scale: 0;

@media (prefers-reduced-motion: reduce) {
--dialog-scale: 1;
}
}

&[open]::backdrop {
--backdrop-bg: transparent;
--dialog-opacity: 0;
}
}

#dialog-image {
grid-area: dialog-close / dialog-close / dialog-credit / dialog-credit;
}

#dialog-credit {
backdrop-filter: blur(1em) brightness(60%);
color: white;
grid-area: dialog-credit;
margin: 0;
padding: 0.5em;
}
}

[data-img] {
aspect-ratio: 1 / 1;
grid-area: image-start / image-start / caption-end / caption-end;
object-fit: cover;
}

li {
display: grid;
grid-template:
"image" 1fr
"button" auto / 1fr;
}

button {
--btn-filter: blur(1em);

backdrop-filter: var(--btn-filter);
border-color: oklch(from var(--color-contrast) l c h / 0.5);
border-style: solid;
border-width: var(--border-size, 1px) 0 0 0;
text-shadow: 0.05rem 0.05rem 0.2rem var(--text-shadow-color, transparent);
transition: backdrop-filter var(--fast) var(--ease),
outline var(--fast) var(--ease), text-shadow var(--fast) var(--ease);

@media (min-resolution: 2x) {
--border-size: 0.5px;
}

&:hover,
&:focus {
--btn-filter: blur(0.75em) saturate(350%);
--text-shadow-color: oklch(from var(--color-base) 10% c h);
}
}

.show {
grid-area: button;
}

/* Presentational styles */

html {
--color-base: oklch(0.4 0.2 210);
--color-contrast: oklch(
from var(--color-base) calc(l + 0.6) calc(c - 0.15) h
);
--fast: 0.35s;
--ease: cubic-bezier(0.5, 0.75, 0.75, 1.25);

background-color: var(--color-base);
color: var(--color-contrast);
font-size: calc(0.75em + 1vw);
font-family: "Varta", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: normal;
}

body {
margin: 0;
}

ul {
margin: 0;
padding: 0;
}

li {
list-style-type: none;
margin: 0;
}

:any-link {
color: var(--action-color, var(--color-contrast));
text-decoration-color: inherit;
text-decoration-line: underline;
text-decoration-thickness: var(--link-underline-thickness, 1px);
text-underline-offset: 0.25em;
transition:
color var(--fast) var(--ease),
text-decoration-color var(--fast) var(--ease),
text-decoration-thickness var(--fast) var(--ease);

&:is(:hover, :focus) {
--action-color: oklch(from var(--color-base) 90% c h);
--link-underline-thickness: 3px;
}
}

img {
block-size: auto;
inline-size: 100%;
max-block-size: inherit;
}

button {
appearance: none;
background-color: var(--btn-bg-color, transparent);
color: var(--action-color, var(--color-contrast));
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
margin: 0;
padding: var(--btn-padding, 0.5em);
outline: 2px var(--outline-color, transparent) solid;
outline-offset: -2px;

span {
font-weight: 670;
}

&:focus {
--outline-color: white;
}
}

.close {
--btn-padding: 0.25em 0.5em;

grid-area: dialog-close;
place-self: start end;
}