Live data from Hacker News

Full CSS3 Lightbox - Absolutely no JavaScript

playground.deaxon.com

41–50 of 114 posts

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#41
post #8
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.

> Does not work in Internet Explorer

Enough said (unfortunately).

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#42
post #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.

.picture a{ border:none;

}

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#43
post #36

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?

Your middle-click technique works with this particular lightbox implementation.

Sort of. It takes you to a page like http://playground.deaxon.com/css/lightbox/#pic1 which shows the image but it's not a direct link to the image.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#44
post #20

Earlier quoted context omitted.

It feels very awkward to me.

I tend to agree - the back history isn't something I'd want to litter with picture enlargements.

It would work better if closing the picture was the same as pressing back (or at least removed the last entry).

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#45
post #8
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.

Why is this not surprising.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#46
post #40
post #27

Earlier quoted context omitted.

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

This is a (very much) known issue with most of the top-of-the-line Logitech mice.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

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

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#48
post #19

Earlier quoted context omitted.

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 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 an image then hitting back works as it should, though.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#49
post #44

Earlier quoted context omitted.

I tend to agree - the back history isn't something I'd want to litter with picture enlargements.

It would work better if closing the picture was the same as pressing back (or at least removed the last entry).

Interesting; I may have to try that out.

Re: Full CSS3 Lightbox - Absolutely no JavaScript

#50
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.

Post reply on HN