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

71–80 of 114 posts

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#71

Post by qjz »

blhack wrote: post #55

Out of curiosity, what is the point of a "light box"? I tend to open lots of images into new tabs while I'm reading articles, and it's really annoying to have the rest of the article go black when I do.

Unfortunately, lightbox-style galleries still behave inconsistently across hardware/platforms/browsers and often break. And, you're right, many people find them annoying. But as a developer who recently converted a portfolio site, I can tell you that it tremendously simplifies the code needed to present a gallery of images, making a portfolio-oriented site much more easy to update. Also, clients tend to go ga-ga over the slick eye candy (thus decreasing the demand for Flash, so it's not all bad).

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#72

Post by lincolnq »

nym wrote: post #8
dmix wrote: post #2

Looks great. Does this work cross-browser? (besides the transition effect) Also, is there any documentation/github repos?

- Works well in Chrome / Safari. - Works without transactions in Firefox - Does not work in Internet Explorer 6, 7, or 8.

Firefox 4 beta supports the transitions beautifully, and very performant too (noticeably smoother than Chrome).

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#73

Post by aditya42 »

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…

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 the same ToC at the top (something a clueless user probably sees everyday [I know I do on O2's site all the time]). You can see how it begins to look like a browser implementation problem.

Maybe the browser should automatically pop all "#"s associated with a URL from its history stack if a user reaches the original URL again (via backs or clicking some in-page link, doesn't matter); I don't know. But I honestly consider this a browser implementation problem, not a web developer problem. I think anything we've been doing till now has been to mitigate this and we shouldn't have to.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#74

Post by krmmalik »

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 using this particular lightbox.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#75

Post by amackera »

daten wrote: post #59
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…

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 a link, so the back button functionality doesn't work as expected.

Links are well understood by everybody that uses the Web. They change the page that you're on to a new page, or a new part of the page. Lightboxes were invented so that the user doesn't need to leave the page, or the part of the page, that they are on.

So in my mind, lightboxes that don't behave like lightboxes and instead behave like links are broken.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#77

Post by pedrokost »

jluxenberg wrote: post #23

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?

Another problen is that laptops dont have a middle click. And Ctrl clicking with on a laptop with the trackpad is really annoying.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#78

Post by deaxon »

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…

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#80

Post by lwhi »

blhack wrote: post #55

Out of curiosity, what is the point of a "light box"? I tend to open lots of images into new tabs while I'm reading articles, and it's really annoying to have the rest of the article go black when I do.

It provides a method to produce a 'modal dialog / window'.
Post reply on HN