SP Studios

LIFE · DESIGN · CODE · SYSTEMS

A little life,
a lot of making.

People, places, design decisions, code and the systems behind the work.

A NEW PORTRAIT
BONGFOODS · CUSTOMER WEB APP
PHOTO VIEWER · JAVASCRIPT
document.querySelectorAll('.photo-open').forEach((trigger) => {
  trigger.addEventListener('click', () => {
    const source = trigger.querySelector('img');
    if (!source) return;
    lastPhotoTrigger = trigger;
    photoImage.src = source.currentSrc || source.src;
    photoImage.alt = source.alt;
    if (!photoDialog.open) photoDialog.showModal();
    photoClose.focus({ preventScroll: true });
  });
});
Open the full frame. An accessible image viewer keeps the photo sharp and returns focus to the image that opened it.
SP STUDIOS · SOFTWARE & DIGITAL TOOLS
TOP END CREATIONS · CLIENT DESIGN
RESPONSIVE IMAGE · CSS
.photo-lightbox-image {
  max-width: min(92vw, 1600px);
  max-height: calc(88vh - 40px);
  object-fit: contain;
}
Built for every screen. The image scales to the viewport and stays fully visible.