
Full CSS3 Lightbox - Absolutely no JavaScript - js4all
http://playground.deaxon.com/css/lightbox/
======
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…

~~~
p0larboy
how do you detect mouse click with css3?

~~~
BCM43
With links.

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

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

~~~
thwarted
Worse is when there's a series of images being displayed in a lightbox and
because the whole thing "needs" to be centered and the navigation is not
absolutely positioned, the next and previous buttons move around on the
screen.

~~~
kyro
Yeah, I forgot about that one, which is by far the most annoying. Often times
I have to scroll down a page just to get to the nav buttons. Down with
lightbox!

~~~
andreyf
These are all criticisms of bad implementations of lightboxes. Used correctly,
they can be quite useful. The trick is to realize that you're interrupting
whatever other workflow the user is considering on this site.

For example, a lightbox that fades when you scroll the page might be less
invasive.

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

~~~
bryne
It's not as elegant as, say, the lightbox window providing you with the URL to
link to, and does cause annoying issues with the browser history.

That said, it's a lot cooler and more robust for site owners who might be
looking to provide linkers with a little more context than serving a
standalone image.

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

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

~~~
imagii
I recently noticed that a surprising number of people around me don't know
that middle click opens links in a new tab.

Most of them use the right click drop down option.

~~~
daten
I always used Ctrl-Left Click

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

~~~
cryptoz
What you just said makes no sense. If a button _doesn't follow what the users
expect to happen_ then the button is broken!

~~~
aditya42
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.

~~~
amackera
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.

~~~
aditya42
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 "#<identifier>"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.

~~~
makmanalp
The solution is not to change browser behavior, that's fine. Just remove the
hashtags from the images so the URL doesn't change when you click on the
picture.

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

~~~
thevivekpandey
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?

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

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

~~~
Semiapies
Fair enough!

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

~~~
RDDavies
.picture a{ border:none;

}

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

~~~
krosaen
hmm, good point, I hadn't thought that this would be for optimization
purposes. but is it premature optimization if the css way is fuglier and the
js way is fast enough to get the desired framerate on modern browsers? would
like to see some stats.

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

------
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?

~~~
nym
\- Works well in Chrome / Safari.

\- Works without transactions in Firefox

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

~~~
aberkowitz
> Does not work in Internet Explorer

Enough said (unfortunately).

~~~
jrockway
Finally a reason to use IE!

------
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/>

~~~
gavingmiller
And if you go up one more directory, he's got a list of work he's done in
HTML, JS, and SVG: <http://playground.deaxon.com/>

I especially like his Custom Checkboxes:
<http://playground.deaxon.com/js/custom-checkboxes/>

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

------
akivabamberger
can someone post a screenshot of this in IE6

~~~
augustl
[http://augustl.s3.amazonaws.com/dump/2010/css3%20lightbox%20...](http://augustl.s3.amazonaws.com/dump/2010/css3%20lightbox%20in%20IE6.jpg)

The unseen: Clicking an image kind of works, thanks to the anchors. The
browser will scroll down to that image, just like the TOC links on Wikipedia
articles.

------
jon_hendry
Slow, like all lightbox implementations. And the flash of the background color
is likely to give someone a seizure. (Ok, I'm being facetious there, but it
looks jerky.)

