Re: Gallery 2020 - MK II

Comments

Colin has a pretty neat implementation of a javascript-free lightbox gallery, which works by using the :checked attribute on a radio select and making the image a label for it. I think it could also be taken a bit further:

  1. Use <img srcset> to serve up alternate renditions for the thumbnails; for example:

    <label for="gallery-2020-2-0">
        <img class="thumbnail"
            src="image-fullres.jpg" srcset="image-fullres.jpg 2048w, image-halfres.jpg 1024w, image-retinathumb 320w, image-smallthumb.jpg 160w"
            alt="Steampunk explorer" />
    </label>
    
  2. Use CSS transitions to provide nice opacity and position animations for the items

1 in particular can save a lot of bandwidth, as the browser will only fetch the high-resolution renditions as they become visible. (And providing half-resolution renditions will also help on mobile clients.)