Full CSS3 Lightbox - Absolutely no JavaScript

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

[flyosity]

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?

[p0larboy]

how do you detect mouse click with css3?

[aw3c2]

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.

[lwhi]

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.

[kyro]

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.

[lukevdp]

You turn javascript off to get rid of lightboxes? I can kind of understand that, but you're also turning off lots of functionality in modern websites/apps. It's like blowing your leg off because your little toe annoys you.

[risratorn]

A lightbox is actually just a modal window which elegantly responds to user interaction: the user wanting to view a larger version of the image. I actually think it's way more elegant and userfriendly than a hardlink to the image which distracts you way more from your browser experience than a lightbox.

[hackermom]

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?

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

[seldo]

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.

[ndunn2]

Agreed, that's very annoying behavior.

[jluxenberg]

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?

[DTrejo]

"What is middle click?"

- my grandma, who has a scroll wheel in the middle of her mouse

[brlewis]

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

[pedrokost]

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

[cmer]

Nice! It breaks the back button however...

[nickbarnwell]

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.

[aditya42]

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

[catch23]

Seems like the navigation history was intentional.

[Semiapies]

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

[bradlane]

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

[425]

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

[krosaen]

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.

[jrockway]

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.

[nowarninglabel]

Depending on the implementation, a CSS only lightbox can be 508 accessible, and a javascript lightbox could be inaccessible.

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

[Yaggo]

> allow me to click outside the picture or press esc to close the lightbox

Word. I always make my lightboxes to close on ESC. I hate when I'm forced to click some tiny random-located icon.

[blhack]

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.

[qjz]

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

[hasenj]

Someone thought it's a neat trick and many followed suit.

I suspect it's a classical case of "you're not your user".

I personally think it's really annoying for the technically literate, and really confusing for the rest of the population.

What I really love, is the chrome plugin that zooms facebook photos on hovering them; facebook photo zoom[1]

[1]: https://chrome.google.com/extensions/detail/elioihkkcdgakfba...

[lwhi]

It provides a method to produce a 'modal dialog / window'.

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

[TamDenholm]

Works beautifully on the iPad. Very nice work.

[dpatru]

It's done by using the :target selector. Targeted images are lightboxed. There is a link in the lightbox that resets the target to dismiss the lightbox. Crudely:

css: a.lb:target {display:block; text-align:center;} a.lb {display:none;}

html: <a href="#img">show image</a> <a class="lb" href="#" id="img"><img src="image.jpg"></a>

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

[dmix]

Looks great. Does this work cross-browser? (besides the transition effect)

Also, is there any documentation/github repos?

[aditya42]

Works in any browser that supports the :target pseudo-class.

https://developer.mozilla.org/En/CSS/:target

[nym]

- Works well in Chrome / Safari.

- Works without transactions in Firefox

- Does not work in Internet Explorer 6, 7, or 8.

[ryanc]

Works well in Opera.

[unicornhorn]

Does anybody know of a minimalist JS variant? There are so many JS lightbox versions I don't even know where to start. I need something super simple.

[bradlane]

If you go up a directory, there are some other neat things in CSS:

http://playground.deaxon.com/css/

[lurchpop]

kind of annoyed me there was no explanation.

- 2nd UL list is opacity:0 - :target psuedoclass applies to element whose id is in the url - targeted element has opacity:1

[DjDarkman]

The problem is that not all browsers support CSS3.