Show HN: HTML/CSS Photo Sheet

[john-doe]

https://cadars.github.io/photosheet/

[john-doe]

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.

[RobertRoberts]

Doesn't work at all in Firefox Linux. (ie, I click on an image and nothing happens)

[marginalia_nu]

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.

[bigwheeler]

The page loads on Firefox/Mac, but that’s about it. Clicking around does nothing. They look like great little pics though!

[tomcooks]

In Mobile FF clicking does nothing, URL changes

[soperj → tomcooks]

Got the same issue with non-mobile firefox.

[john-doe → soperj]

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)

[adamredwoods → tomcooks]

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!

[ssss11 → tomcooks]

Works fine mobile safari

[dole → ssss11]

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.

[masswerk → ssss11]

Safari desktop shows always the first image ("The Donut Hole").

[themodelplumber]

Wow nice job. I want to find a drop-in solution like this for projects where I use llgal/lazygal/etc.

[zichy]

Really nice showcase. While I like non-JS solutions, some kind of JavaScript is almost always needed when creating interactive elements to ensure accessibility.

[uhoh-itsmaciek]

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).

[lsferreira42]

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!

[DHPersonal]

It fails in Safari. :(