Add an image gallery shortcode
This commit is contained in:
parent
fd01d9d124
commit
124bfaed67
11 changed files with 389 additions and 0 deletions
|
|
@ -1,4 +1,5 @@
|
|||
@import './_schedule.css';
|
||||
@import './_gallery.css';
|
||||
|
||||
.header__intro_headline {
|
||||
margin: 0;
|
||||
|
|
|
|||
180
assets/css/_gallery.css
Normal file
180
assets/css/_gallery.css
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
/* Gallery shortcode: square thumbnails, two per row on wide screens, and the lightbox. */
|
||||
|
||||
.gallery {
|
||||
container-type: inline-size;
|
||||
margin-block: var(--spacing-l);
|
||||
}
|
||||
|
||||
.gallery__list {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
@container (width >= 40rem) {
|
||||
.gallery__list {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.gallery__item,
|
||||
.gallery__figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.gallery__link {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
border-radius: var(--radius-m);
|
||||
cursor: zoom-in;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 3px solid var(--color-link);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.gallery__link img {
|
||||
transition: scale 0.2s;
|
||||
}
|
||||
|
||||
.gallery__link:hover img {
|
||||
scale: 1.03;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery__credit {
|
||||
margin-block-start: 0.25rem;
|
||||
font-family: var(--ff-alt);
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--color-text-meta);
|
||||
}
|
||||
|
||||
/* Lightbox */
|
||||
|
||||
/* No scrolling of the page behind it. */
|
||||
html:has(.lightbox[open]) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
width: 100vw;
|
||||
max-width: none;
|
||||
height: 100dvh;
|
||||
max-height: none;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
border: 0;
|
||||
background: rgb(0 0 0 / 0.92);
|
||||
color: #fff;
|
||||
|
||||
&[open] {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
&::backdrop {
|
||||
background: rgb(0 0 0 / 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
/* On wider screens, the arrows sit beside the image instead of on it. */
|
||||
@media (min-width: 40rem) {
|
||||
.lightbox {
|
||||
padding-inline: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox__figure {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lightbox__image {
|
||||
display: block;
|
||||
min-height: 0;
|
||||
max-width: 100%;
|
||||
max-height: calc(100dvh - 7rem);
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.lightbox__caption {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 0.25rem 1rem;
|
||||
max-width: 50rem;
|
||||
font-family: var(--ff-alt);
|
||||
font-size: var(--fs-s);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lightbox__credit,
|
||||
.lightbox__counter {
|
||||
color: rgb(255 255 255 / 0.75);
|
||||
}
|
||||
|
||||
.lightbox__counter {
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.lightbox__button {
|
||||
position: fixed;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 50%;
|
||||
background: rgb(255 255 255 / 0.15);
|
||||
color: #fff;
|
||||
font-size: 2rem;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: rgb(255 255 255 / 0.3);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 3px solid #fff;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox__close {
|
||||
inset-block-start: 1rem;
|
||||
inset-inline-end: 1rem;
|
||||
}
|
||||
|
||||
.lightbox__previous,
|
||||
.lightbox__next {
|
||||
inset-block-start: calc(50% - 1.5rem);
|
||||
}
|
||||
|
||||
.lightbox__previous {
|
||||
inset-inline-start: 1rem;
|
||||
}
|
||||
|
||||
.lightbox__next {
|
||||
inset-inline-end: 1rem;
|
||||
}
|
||||
116
assets/js/gallery.js
Normal file
116
assets/js/gallery.js
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
// Gallery shortcode: opens the full image in a lightbox (a modal <dialog>) with its alt text
|
||||
// and credit. Arrow buttons, arrow keys and swiping move between the images of the gallery;
|
||||
// Escape, the close button or a click beside the image close it.
|
||||
{
|
||||
const button = (className, label, symbol) => {
|
||||
const element = document.createElement('button');
|
||||
element.type = 'button';
|
||||
element.className = `lightbox__button ${className}`;
|
||||
element.setAttribute('aria-label', label);
|
||||
element.innerHTML = `<span aria-hidden="true">${symbol}</span>`;
|
||||
return element;
|
||||
};
|
||||
|
||||
const lightbox = (gallery) => {
|
||||
const links = [...gallery.querySelectorAll('.gallery__link')];
|
||||
const labels = gallery.dataset;
|
||||
let index = 0;
|
||||
|
||||
const dialog = document.createElement('dialog');
|
||||
dialog.className = 'lightbox';
|
||||
dialog.setAttribute('aria-label', labels.labelDialog);
|
||||
dialog.innerHTML = `
|
||||
<figure class="lightbox__figure">
|
||||
<img class="lightbox__image" alt="">
|
||||
<figcaption class="lightbox__caption" aria-live="polite">
|
||||
<span class="lightbox__alt"></span>
|
||||
<span class="lightbox__credit"></span>
|
||||
<span class="lightbox__counter"></span>
|
||||
</figcaption>
|
||||
</figure>`;
|
||||
const close = button('lightbox__close', labels.labelClose, '×');
|
||||
const previous = button('lightbox__previous', labels.labelPrevious, '‹');
|
||||
const next = button('lightbox__next', labels.labelNext, '›');
|
||||
dialog.append(close);
|
||||
if (links.length > 1) dialog.append(previous, next);
|
||||
document.body.append(dialog);
|
||||
|
||||
const image = dialog.querySelector('.lightbox__image');
|
||||
const preload = (link) => {
|
||||
new Image().src = link.href;
|
||||
};
|
||||
|
||||
const show = (newIndex) => {
|
||||
index = (newIndex + links.length) % links.length;
|
||||
const link = links[index];
|
||||
image.src = link.href;
|
||||
image.width = link.dataset.width;
|
||||
image.height = link.dataset.height;
|
||||
image.alt = link.dataset.alt;
|
||||
// The alt text is shown as the caption, so screen readers get it once, from the image.
|
||||
dialog.querySelector('.lightbox__alt').textContent = link.dataset.alt;
|
||||
dialog.querySelector('.lightbox__alt').setAttribute('aria-hidden', 'true');
|
||||
dialog.querySelector('.lightbox__credit').textContent = link.dataset.credit ?? '';
|
||||
dialog.querySelector('.lightbox__counter').textContent =
|
||||
links.length > 1 ? `${index + 1} / ${links.length}` : '';
|
||||
if (links.length > 1) {
|
||||
preload(links[(index + 1) % links.length]);
|
||||
preload(links[(index - 1 + links.length) % links.length]);
|
||||
}
|
||||
};
|
||||
|
||||
links.forEach((link, i) => {
|
||||
link.addEventListener('click', (event) => {
|
||||
// Let modified clicks open the image in a new tab or window as usual.
|
||||
if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
|
||||
event.preventDefault();
|
||||
show(i);
|
||||
dialog.showModal();
|
||||
close.focus();
|
||||
});
|
||||
});
|
||||
|
||||
// Closing goes through here, so that focus goes back to the thumbnail of the image that was
|
||||
// shown (the browser would restore it to where it was before the lightbox opened).
|
||||
const hide = () => {
|
||||
dialog.close();
|
||||
links[index].focus();
|
||||
};
|
||||
|
||||
close.addEventListener('click', hide);
|
||||
// Escape, or the back gesture on Android.
|
||||
dialog.addEventListener('cancel', (event) => {
|
||||
event.preventDefault();
|
||||
hide();
|
||||
});
|
||||
previous.addEventListener('click', () => show(index - 1));
|
||||
next.addEventListener('click', () => show(index + 1));
|
||||
|
||||
// A click on the dark area around the image closes the lightbox.
|
||||
dialog.addEventListener('click', (event) => {
|
||||
if (event.target === dialog || event.target.classList.contains('lightbox__figure')) hide();
|
||||
});
|
||||
|
||||
dialog.addEventListener('keydown', (event) => {
|
||||
if (links.length < 2) return;
|
||||
if (event.key === 'ArrowLeft') show(index - 1);
|
||||
else if (event.key === 'ArrowRight') show(index + 1);
|
||||
else return;
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
// Swiping left or right on touch screens.
|
||||
let startX = null;
|
||||
dialog.addEventListener('pointerdown', (event) => {
|
||||
if (event.pointerType !== 'mouse') startX = event.clientX;
|
||||
});
|
||||
dialog.addEventListener('pointerup', (event) => {
|
||||
if (startX === null || links.length < 2) return;
|
||||
const distance = event.clientX - startX;
|
||||
startX = null;
|
||||
if (Math.abs(distance) > 50) show(index + (distance < 0 ? 1 : -1));
|
||||
});
|
||||
};
|
||||
|
||||
document.querySelectorAll('[data-gallery]').forEach(lightbox);
|
||||
}
|
||||
Loading…
Reference in a new issue