Full CSS3 Lightbox - Absolutely no JavaScript

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

by js4all • 16 years ago

252 109 16 years ago

playground.deaxon.com

dmix• 16 years ago

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

Also, is there any documentation/github repos?

nym• 16 years ago

- Works well in Chrome / Safari.

- Works without transactions in Firefox

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

aberkowitz• 16 years ago

> Does not work in Internet Explorer

Enough said (unfortunately).

nayanshah• 16 years ago

Why is this not surprising.

lincolnq• 16 years ago

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

ryanc• 16 years ago

Works well in Opera.

aditya426• 16 years ago

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

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

Semiapies8• 16 years ago

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

ronaldj• 16 years ago

Why not?

atlbeer• 16 years ago

Because it breaks the paradigm of

HTML = Content

CSS = Style / Design

JS = Interaction

Once you start to mix them up you start down a hair path

Semiapies8• 16 years ago

Minor reasons: less performant than Javascript solutions (the transition is sluggish and jittery in Chrome for me) and the fact that I have to click a little target to shrink it back, whereas most Javascript solutions will let me hit Escape or click elsewhere on the page to shrink it back.

Major reason: Separation of concerns: CSS is for appearance, Javascript is for behavior. They don't work well trying to do the other's job. This is touched on by the shrinking problem I mentioned above - it's easy to watch more events to make the behavior of Javascript functionality more flexible or more user-friendly, but not so much in CSS.

That said, it's a toy demonstration of transitions; it's cool that the bear dances, even if I wouldn't take him on Dancing with the Stars.

thevivekpandey4• 16 years ago

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?

Semiapies8• 16 years ago

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

aditya426• 16 years ago

If you want to do something other than show a bigger version of an image (like fetch extra data about it for captions), just CSS won't cut it. Remember that "lightbox" isn't just the effect, it's a UI control.

cmer2• 16 years ago

Nice! It breaks the back button however...

catch23• 16 years ago

Seems like the navigation history was intentional.

cmer2• 16 years ago

It feels very awkward to me.

fairlyodd• 16 years ago

It'll always feel awkward if you attach navigation history to a modal display.

nickbarnwell• 16 years ago

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.

cryptoz2• 16 years ago

What you just said makes no sense. If a button doesn't follow what the users expect to happen then the button is broken!

brettnak• 16 years ago

Actually, it does exactly what I ( an Android user ) expect the back button to do and what I've wanted every lightbox to do. Sometimes the css for the close button is wrong, or the js is messed up and the close button doesn't work. The back button closing the lightbox is exactly what I want.

aditya426• 16 years ago

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

dc2k08• 16 years ago

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

bradlane2• 16 years ago

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• 16 years ago

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

RDDavies• 16 years ago

.picture a{ border:none;

}

bradlane2• 16 years ago

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

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

gavingmiller• 16 years ago

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/

TamDenholm• 16 years ago

Works beautifully on the iPad. Very nice work.

jluxenberg• 16 years ago

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• 16 years ago

"What is middle click?"

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

cryptoz2• 16 years ago

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

rhizome• 16 years ago

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.

tzury• 16 years ago

I also have a scroll wheel, but that scroll wheel is clickable

brlewis• 16 years ago

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

mcrittenden• 16 years ago

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.

pedrokost• 16 years ago

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

martinkallstrom• 16 years ago

My main reading device for HN and subsequentially this demo is my ipad. Tabs or middle-clicks aren't available, not even a right-click. For this platf orm lightboxes are great as long as they fit the screen.

aw3c22• 16 years ago

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.

kyro2• 16 years ago

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• 16 years ago

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.

qjz2• 16 years ago

But the initial page load takes longer because it loads the full size images along with the thumbnails. That could be a deal breaker with a large set of images.

jmulho• 16 years ago

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?

hackermom2• 16 years ago

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?

pjscott2• 16 years ago

I open images in new tabs. No reloading; limited ping-ponging.

lwhi2• 16 years ago

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.

j79• 16 years ago

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

Kind of like Flash :)

risratorn• 16 years ago

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.

lukevdp• 16 years ago

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.

aw3c22• 16 years ago

I turn javascript off because it is mostly used to annoy me. Be it advertisements, be it tracking, be it lightbox-like things.

I use few "web 2.0" sites. If I need it, I turn it on per-site.

jon_hendry• 16 years ago

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

krosaen2• 16 years ago

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.

jrockway2• 16 years ago

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.

krosaen2• 16 years ago

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.

nowarninglabel• 16 years ago

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

bmelton• 16 years ago

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

akivabamberger• 16 years ago

can someone post a screenshot of this in IE6

augustl• 16 years ago

http://augustl.s3.amazonaws.com/dump/2010/css3%20lightbox%20...

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.

blhack• 16 years ago

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.

hasenj• 16 years ago

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

qjz2• 16 years ago

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

lwhi2• 16 years ago

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

krmmalik• 16 years ago

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.

ndunn2• 16 years ago

Agreed, that's very annoying behavior.

seldo• 16 years ago

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• 16 years ago

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.

etruong42• 16 years ago

This also allows for the middle-click user flow.

deaxon• 16 years ago

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• 16 years ago

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• 16 years ago

how do you detect mouse click with css3?

BCM43• 16 years ago

With links.

IChrisI• 16 years ago

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• 16 years ago

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

EGF• 16 years ago

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

torme• 16 years ago

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.

lurchpop• 16 years ago

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• 16 years ago

The problem is that not all browsers support CSS3.

dpatru• 16 years ago

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>

unicornhorn• 16 years ago

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.

Full CSS3 Lightbox - Absolutely no JavaScript

Related Stories