Disclaimer: it’s more of an experiment than something anyone should use: browser performance might get worse when displaying too many images.
There is a tiny bit of Javascript to close the overlay with Esc, but other than that, it’s only made by (ab)using HTML and CSS.
Doesn't work at all in Firefox Linux. (ie, I click on an image and nothing happens)
Pressed a picture. The image shows. Pressed the back button. Nothing happens. Pressed the back button again. The browser left the site.
Chrome on Android.
The page loads on Firefox/Mac, but that’s about it. Clicking around does nothing. They look like great little pics though!
In Mobile FF clicking does nothing, URL changes
Got the same issue with non-mobile firefox.
Right… I had it working at some point, I guess :focus-within has some limitations. (This could be solved by :target-within, if browsers implement it someday)
Works fine mobile safari
Safari desktop shows always the first image ("The Donut Hole").
iOS Safari, the detail view worked for the first image I clicked on, but just gets stuck on the last image you closed out of. You can still scroll to a new image, but it won’t update to a newly clicked one.
I clicked the back button and that did not work (Chrome, desktop). Seems this demo has a ways to go yet. Not bad for an MVP!
Wow nice job. I want to find a drop-in solution like this for projects where I use llgal/lazygal/etc.
Really nice showcase. While I like non-JS solutions, some kind of JavaScript is almost always needed when creating interactive elements to ensure accessibility.
Also not working here on FF/Linux. Tried Chrome and it's pretty nice. One odd thing I noticed: if I click on an image and then click left or right to go forward or back, after mouse down but before mouse up, the picture index shows "35/35" (it shows the correct position once I release the mouse button).
I wrote something like that in shell script very long time ago, it's a very fun experiment to share photos with your friends
Congrats!