Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Full CSS3 Lightbox - Absolutely no JavaScript

playground.deaxon.com

Post reply on HN
Print view View original

91–100 of 114 posts

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#91

Post by dangrover »

cryptoz wrote: post #31
DTrejo wrote: post #27

Earlier quoted context omitted.

"What is middle click?" - my grandma, who has a scroll wheel in the middle of her mouse

"It means click the button in the middle" If she can use a computer and browse the web, she can learn to use the mouse she owns. [Note: props to your grandma] Edit: Wait, maybe you're referring to a mouse that has the wheel but the wheel isn't a button? In that case, the GP could have said "right click, open image" rather than "middle click". Same thing.

"What's a tab?"

"And have you seen my medication?"

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#92

Post by bryne »

seldo wrote: post #89
krmmalik wrote: post #74

Dont like how when i press the back button i get a history of pictures i have viewed. If i am at liberty to choose whichever picture i want then i dont need the back button to preserve my selection history. When i click back, i want to go BACK to the site i just came from. I assume this isnt some bug or some flaw, and that it can probably be coded to behave differently, but as things stand that would prevent me from…

It's funny you say this, because preserving state and history is one the the things JS-based solutions tend to lack. Check this out: http://playground.deaxon.com/css/lightbox/#pic3 That's a permalink to an individual lightboxed photo. No JS, no server-side magic. Colour me very impressed.

It's not as elegant as, say, the lightbox window providing you with the URL to link to, and does cause annoying issues with the browser history.

That said, it's a lot cooler and more robust for site owners who might be looking to provide linkers with a little more context than serving a standalone image.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#93

Post by EGF »

This is actually quite nice because it allows permalinks to the lightbox items. This makes for a rough browsing experience if you need to go back, but I like the detail that lets you link somewhere that someone can actually find in the future vs. "go to this page, then click here, etc...."

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#94

Post by makmanalp »

aditya42 wrote: post #73
amackera wrote: post #48

Earlier quoted context omitted.

Steps to reproduce broken button: 1) Open the demo page 2) Click image 3) Click 'X' in top left of image 4) Click different image 5) Click the 'X' in the top left of image 6) Click browser's 'back' button 7) Observe how you're staring at the image, not the hacker news page you came from. The problem is that clicking the 'X' should pop the image off the stack, not just add another page ("#home") to the stack. Opening…

Here's another demo to reproduce the "broken" back button: 1. Go to http://en.wikipedia.org/wiki/Hacker 2. Click the "Innovation" link in the ToC on the right 3. Click the "Entertainment" link (you can just see it) under the "Innovation" one. 4. Click the back button. 5. Observe how you're not taken back to Hacker News. Now imagine this is a really long page of FAQs, with a "Return to top" after each question, and th…

The solution is not to change browser behavior, that's fine. Just remove the hashtags from the images so the URL doesn't change when you click on the picture.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#95

Post by pjscott »

hackermom wrote: post #85
pjscott wrote: post #66

Earlier quoted context omitted.

I open images in new tabs. No reloading; limited ping-ponging.

I could respond to this with "in a lightbox gallery there is no reloading or ping-ponging either, and I don't even have to hold ctrl/cmd to open images in new tabs, so it's even smarter", but, instead I'll just point out that with this superb CSS-only solution you can open images in new tabs if you want - the best of two worlds, without involving javascript :)

That's the number one feature I want in a Lightbox: for middle-clicking and ctrl-clicking to open the image in a new tab, rather than running some slow-as-molasses JavaScript animation that pops up a modal box and completely screws with my expectations of how a web page will behave.

This CSS-based lightbox actually looks like the first good Lightbox I've seen, in terms of usability.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#96

Post by torme »

Very neat, I checked out the other stuff you've got on there and it's pretty sweet.

Seems like a lot of people have missed the point that this is just a hack to see if a light box in JUST CSS and HTML could be made. Because theres no JS or actual logic, this demo just leverages the browser to maintain the state. It's a necessary side effect that the back buttons behave this way, and it could be coded to behave differently, but that would defeat the purpose of the exercise.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#97

Post by krosaen »

jrockway wrote: post #50
krosaen wrote: post #47

Interesting to see this is possible, but this is beyond what I would want to use css for, how far will "look ma! no javascript!" go? Seing the logic in a jquery click handler seems at least as readable / maintainable as a bunch of css rules for the same reason I prefer to have more logic in java in android applications than in various xml layout and manifest files.

It's easier to optimize a description of what the results should be than to optimize a description of how to calculate the results. If you say "give me the first 10 prime numbers", that's easy to calculate efficiently . If you write out the Sieve of Eratosthenes, then that's harder to make efficient. Similarly, it's easier to optimize CSS rendering than it is to optimize arbitrary JavaScript programs.

hmm, good point, I hadn't thought that this would be for optimization purposes. but is it premature optimization if the css way is fuglier and the js way is fast enough to get the desired framerate on modern browsers? would like to see some stats.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#98

Post by p0larboy »

deaxon wrote: post #78

I've been tweeting this today but I think it could be useful to repeat it here: my CSS demos are only experiments. The goal is to test all those new possibilities, show the power of CSS3 and, basically, having fun. They aren't intended to be used in production and actually you shouldn't. Most of them are not accessible and not cross browser…

how do you detect mouse click with css3?

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#99

Post by BCM43 »

p0larboy wrote: post #98
deaxon wrote: post #78

I've been tweeting this today but I think it could be useful to repeat it here: my CSS demos are only experiments. The goal is to test all those new possibilities, show the power of CSS3 and, basically, having fun. They aren't intended to be used in production and actually you shouldn't. Most of them are not accessible and not cross browser…

how do you detect mouse click with css3?

With links.
Post reply on HN