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

81–90 of 114 posts

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#81

Post by flyosity »

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…

The author has been doing some really innovative stuff with CSS3 and declarative styles/animations for awhile now so I don't see the problem with these experiments. They're fun, they teach new things, and they're given away for free. Where's the harm?

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#82

Post by lwhi »

aw3c2 wrote: post #24

So I will get lightboxed even with my no-javascript browsing habits? I liked that most sites simply serve the direct image url to me. Lightbox is an annoying eye-candy.

A lightbox is really just an implementation of a 'modal dialog / window' - which is useful, because it demands the user's attention before it can be dismissed.

Being able to produce such a window in web applications could be useful in many situations - we don't need to limit them to image display.

The fact that 'lightboxes' have been abused / over-used, isn't a reason to dismiss the technology.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#83

Post by [deleted] »

amackera wrote: post #75
daten wrote: post #59

Earlier quoted context omitted.

Does that make it "broken" or just incompatible with your expectations? Would other non-technical users have the same expectations? It's possible other users will want to go "back" to the image they last visited. Consider if this was done just HTML 4 and no CSS or Javascript. You would click a thumbnail and a new page would be loaded with a full size version of the image. You would then click a "close" button that wo…

I understand your argument, and it makes sense; however, I disagree. The user clicks the image in order to see it full-size. The lightbox overlays the page that the user is on . The user is not conscious that they are navigating to a new page, or even just a part of the page that they weren't at before (to the #image). Though the workflow is in actuality following a link, the user is not aware that they are following…

[deleted]

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#84

Post by ndunn2 »

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…

Agreed, that's very annoying behavior.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#85

Post by hackermom »

pjscott wrote: post #66
hackermom wrote: post #63

Earlier quoted context omitted.

You're really not the least annoyed by having to ping-pong back and forth when watching an image gallery, with whatever eventual content reloading that may be implied?

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

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#86

Post by jmulho »

kyro wrote: post #53
aw3c2 wrote: post #24

So I will get lightboxed even with my no-javascript browsing habits? I liked that most sites simply serve the direct image url to me. Lightbox is an annoying eye-candy.

I don't mind it if it's snappy and the image loads almost instantaneously, which is what I got when viewing this demo. Typically, with javascript, I'd have to wait a few seconds for the loading-wheel to spin until the image finally loads. Not that I can't wait a few seconds; it's just annoying.

Given the limited amount of data that can be displayed on a screen at one time, you should never have to wait. If the loading-wheel is spinning long enough to see, I consider that a bug. Yet a stuck loading wheel is pretty much synonymous with ajax. I see it literally everwhere I go. What gives?

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#87

Post by dc2k08 »

aditya42 wrote: post #76
cmer wrote: post #4

Nice! It breaks the back button however...

If the close button had an 'onclick="javascript:history.back()"' attached to it, we wouldn't have this problem :) [We can argue the pureness of the demo after that till the end of time though.]

Another option, without the need for javascript would be to use the hover pseudo-class to display images instead of an anchor link.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#88

Post by IChrisI »

This is pretty cool. Suggestions:

  - respect my back button [1]
  - allow me to click outside the picture or press esc to close the lightbox
  - allow middle-click to open the image directly
[1] We can argue about transitions and correct behavior all day, but this implementation is different from other lightboxes I've seen, and thus it is "broken" to me.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#89

Post by seldo »

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.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#90

Post by Pheter »

amackera wrote: post #48
aditya42 wrote: post #35

Earlier quoted context omitted.

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 lightbo…

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…

I don't have any experience with developing lightboxes but couldn't the 'X' button just use javascript to go back in the history (instead of directly hiding the image). Or is that how most lightboxes work but because this one cannot use javascript it is not possible to do so?
Post reply on HN