Gallery 2020 - MK II

10 May 2020, 10:05 pm AEST

Note: This work has been a journey. I went from this model, to a model less reliant on magic numbers (this one!), to a change using srcset then back to two images, but lazy loading for bandwidth preservation. Phew.

Continuing my idiocy of playing with things I shouldn't. The last gallery looked pretty good and I played with it more with my son. Playing, though, pointed out some things

Magic numbers - the top padding relied on there being only a single line of thumbnails. Once that got too long, it looked bad.
Inline - I played with it too much and broke the ability for it to push content down to fit the gallery thing. The way it was structured, it didn't look great in overlay mode.

Naturally, I decided to keep the concept but think about it further. Getting rid of magic numbers meant I needed to pop up the window again as an overlay rather than having it anchored to the images. I tried using overflow-x: auto and other doodads, but it just started getting messy. So I returned to the overlay.

This time I played a bit further with the structure. I wanted to have Next and Previous buttons for easy navigation. Pondering it... I realised I could separate the Label from the Input in order to move the Input Before the previous image. So I could click an image, the Checked Input would then be in a CSS position to give me access to the Previous image - so I could use direct siblings to target Previous, Current and Next icons. And... it's kinda working.

Again, I'd love feedback, but I'm really chuffed about this No Javascript, Popup Gallery that uses Radio buttons to pop up, navigate and then close the gallery. Woo! I'm thinking for the Mobile/ Small Screen version I shrink the X and replace the thumbnails with narrow < > arrows... but that should still work in theory. Mmm, theory. Where everything is wonderful and makes sense.

Gallery

Professor von Explaino

Syndication:[Twitter]