6 ms·

Show HN: HTML/CSS Photo Sheet

33 points by john-doe 5y ago

themodelplumber 5y ago
Wow nice job. I want to find a drop-in solution like this for projects where I use llgal/lazygal/etc.
john-doe 5y ago
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.
DHPersonal 5y ago
It fails in Safari. :(
tomcooks 5y ago
In Mobile FF clicking does nothing, URL changes
- adamredwoods 5y ago
  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!
- soperj 5y ago
  Got the same issue with non-mobile firefox.
  - john-doe 5y ago
    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)
- ssss11 5y ago
  Works fine mobile safari
  - masswerk 5y ago
    Safari desktop shows always the first image ("The Donut Hole").
  - dole 5y ago
    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.
marginalia_nu 5y ago
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.
RobertRoberts 5y ago
Doesn't work at all in Firefox Linux. (ie, I click on an image and nothing happens)
bigwheeler 5y ago
The page loads on Firefox/Mac, but that’s about it. Clicking around does nothing. They look like great little pics though!
zichy 5y ago
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 5y ago
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 5y ago
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!

33 points by john-doe 5y ago

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

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.

DHPersonal 5y ago

It fails in Safari. :(

tomcooks 5y ago

In Mobile FF clicking does nothing, URL changes

adamredwoods 5y ago
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!
soperj 5y ago
Got the same issue with non-mobile firefox.
- john-doe 5y ago
  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)
ssss11 5y ago
Works fine mobile safari
- masswerk 5y ago
  Safari desktop shows always the first image ("The Donut Hole").
- dole 5y ago
  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.

marginalia_nu 5y ago

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.

RobertRoberts 5y ago

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

bigwheeler 5y ago

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

zichy 5y ago

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 5y ago

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 5y ago

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!