introducing blogallery, a super lightweight, zero-config vanilla javascript providing progressive enhancement for an image gallery and full screen viewer

I am a dedicated amateur photographer, and I've decided that I like my blog as my "source of truth" for photos. (Also, in an era where amateur photograph is leaning towards "what looks impressive on a phone screen", it's truly a pleasure to be able to open up an image full screen on a generous monitor - you can really sink into the detail.)

A while back I made up some CSS and js for nice thumbnail galleries. If the HTML was simple links wrapping images for a scrollable column, maybe looking like this: 

then I could change it into a thumbnail gallery like this via CSS:

using "scrollIntoView()" to go to the larger issue when a specific image was clicked. And I had each of the "full-width" images link to the original, giant image. But it was always kind of weird that you couldn't, like, use arrow keys to get to the next image in the set.

But now there is... BLOGALLERY!!!

Now simple HTML like

<div class="blogallery">
  <h2 class="blogallery-caption">Open Photo Gallery</h2>
  
  <a href="IMG1-FULLSIZE.jpg">
    <img src="IMG1-INLINE-SIZE.jpg">
  </a>

appears with the same thumbnail gallery, and still opens up into the scrollable column view, but then each image clicks into a full screen viewer, with clickable arrow and keyboard controls:

It also supports images without links, and images in the <figure> tag and will show the <figcaption>s in a reasonable way. No code (or build system) needed (or currently supported) - just include the .js and .css file and document ready hunts for the "blogallery" class.

Some minor cleverness in terms of using object-fit: contain; for the image, and also using a background-image for the image of the scrollable column (lower-rez) image. 

You can see it action at my Photos of the Year tag page (and see some interesting (IMO) photos as well!)