Live data from Hacker News

Full CSS3 Lightbox - Absolutely no JavaScript

playground.deaxon.com

31–40 of 114 posts

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#31
post #27

Is it just me or is the Lighbox effect really annoying? What's wrong with middle-clicking an image and having it open in a new tab?

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

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#32
post #4

Nice! It breaks the back button however...

Au contraire, the back button behaves exactly as it should. It's not how users would expect it to function, but it does obey the stack.

Actually, it does exactly what I ( an Android user ) expect the back button to do and what I've wanted every lightbox to do. Sometimes the css for the close button is wrong, or the js is messed up and the close button doesn't work. The back button closing the lightbox is exactly what I want.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#33

Neat that you can do that. Not a technique that I'd ever want to use.

I think I would like to use it. I consider lightbox functionality to be related to the layout of the content, and hence logically a part of CSS rather than javascript. In CSS3 world, I like to use javascript for the tasks not related to the layout: such as making ajax queries, manipulating user inputted data, etc. Is there a case for relying on javascript for functionality such as lightbox?

If you want to do something other than show a bigger version of an image (like fetch extra data about it for captions), just CSS won't cut it. Remember that "lightbox" isn't just the effect, it's a UI control.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#34
post #7

Works great in Chrome; Firefox has a border around each pic, since they're links. Of course, it's horribly, horribly broken in IE. Then again, that goes without saying ;)

IE 9 Beta works. Like FF, it has blue border around every picture and transition effect is missing.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#35
post #19

Earlier quoted context omitted.

Au contraire, the back button behaves exactly as it should. It's not how users would expect it to function, but it does obey the stack.

What you just said makes no sense. If a button doesn't follow what the users expect to happen then the button is broken!

Not true. A back button is meant to "go back to previous state". When you click a link, then back, you will go back to the previous page or position on the same page depending on the link you clicked.

Similarly, if you enable a lightbox and your page goes behind a modal image, hitting back will behave exactly the way it should, i.e. take you back to your previous state.

I'll go one step further and say that a lightbox implementation that doesn't do this should be considered broken since it breaks user expectations. This does raise the question of judging a user's intent when he presses the back/forward button while there is something modal on his screen, but let's save that for some other time.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#37

Earlier quoted context omitted.

I think I would like to use it. I consider lightbox functionality to be related to the layout of the content, and hence logically a part of CSS rather than javascript. In CSS3 world, I like to use javascript for the tasks not related to the layout: such as making ajax queries, manipulating user inputted data, etc. Is there a case for relying on javascript for functionality such as lightbox?

Why would lightbox functionality or any other animation and interaction be part of "layout"?

I am unable to make up my mind here. As atlbeer says, following is the standard breakup of responsibilities: - HTML = Content - CSS = Style / Design - JS = Interaction

As argued elsewhere, lightbox straddles JS and CSS domains.

I was thinking that in CSS3 world, we should have slightly different breakup of responsibilities (subject to resolving performance issues) - HTML = Content - CSS3 = style/design and changes in style/design - JS = interaction other than purely style/design changes

I see that this breakup may lead to confusion in some situations. (Though I still find it more appealing for lightbox example) So, let me make up my mind when I have more experience with CSS3 :-)

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#38

Earlier quoted context omitted.

Why would lightbox functionality or any other animation and interaction be part of "layout"?

I am unable to make up my mind here. As atlbeer says, following is the standard breakup of responsibilities: - HTML = Content - CSS = Style / Design - JS = Interaction As argued elsewhere, lightbox straddles JS and CSS domains. I was thinking that in CSS3 world, we should have slightly different breakup of responsibilities (subject to resolving performance issues) - HTML = Content - CSS3 = style/design and changes in…

Fair enough!

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#40
post #27

Is it just me or is the Lighbox effect really annoying? What's wrong with middle-clicking an image and having it open in a new tab?

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

I don't ever use mine (Logitech G5) because it not only has side-to-side actions, but many times when i try to middle click, the wheel will scroll. I know this is probably my own coordination, but I find I really have to press it perfectly perpendicularly. Maybe there have been improvements in middle-click technology in the past few years.
Post reply on HN