7 ms·
Full CSS3 Lightbox - Absolutely no JavaScript
- dmix 16y agoLooks great. Does this work cross-browser? (besides the transition effect) Also, is there any documentation/github repos?
- nym 16y ago- Works well in Chrome / Safari. - Works without transactions in Firefox - Does not work in Internet Explorer 6, 7, or 8.
- aberkowitz 16y ago> Does not work in Internet Explorer Enough said (unfortunately).
- jrockway 16y agoFinally a reason to use IE!
- nayanshah 16y agoWhy is this not surprising.
- lincolnq 16y agoFirefox 4 beta supports the transitions beautifully, and very performant too (noticeably smoother than Chrome).
- deleted 16y ago[deleted]
- ryanc 16y agoWorks well in Opera.
- aditya42 16y agoWorks in any browser that supports the :target pseudo-class. https://developer.mozilla.org/En/CSS/:target https://developer.mozilla.org/En/CSS/:target
- Semiapies 16y agoNeat that you can do that. Not a technique that I'd ever want to use.
- ronaldj 16y agoWhy not?
- atlbeer 16y agoBecause 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
- thevivekpandey 16y agoLightbox functionality encompasses the JS domain (since user is interacting with the page) as well as CSS domain (since the change that is happening on the page is purely of style/design). So, the breakup which you have given does not unequivocally argue for the use of JS.
- Semiapies 16y agoIt argues more for JS than CSS.
- Semiapies 16y agoMinor 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.
- cmer 16y agoNice! It breaks the back button however...
- catch23 16y agoSeems like the navigation history was intentional.
- nickbarnwell 16y agoAu 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.
- 16y ago
- bradlane 16y agoWorks 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 ;)
- bradlane 16y agoIf you go up a directory, there are some other neat things in CSS: http://playground.deaxon.com/css/ http://playground.deaxon.com/css/
- gavingmiller 16y agoAnd 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/ http://playground.deaxon.com/ I especially like his Custom Checkboxes: http://playground.deaxon.com/js/custom-checkboxes/ http://playground.deaxon.com/js/custom-checkboxes/
- TamDenholm 16y agoWorks beautifully on the iPad. Very nice work.
- jluxenberg 16y agoIs 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 16y ago"What is middle click?" - my grandma, who has a scroll wheel in the middle of her mouse
- cryptoz 16y 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.
- al_james 16y agoArh, but then she will forget how to left click and we will be back to square one.
- imagii 16y agoI 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 16y agoI always used Ctrl-Left Click
- dangrover 16y ago"What's a tab?" "And have you seen my medication?"
- rhizome 16y ago
- aw3c2 16y agoSo 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 16y agoI 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 16y agoWorse 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 16y agoYeah, 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 16y agoThese 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.
- qjz 16y agoBut 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.
- jon_hendry 16y agoSlow, 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.)
- krosaen 16y agoInteresting 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 16y agoIt'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 16y agohmm, 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 16y agoDepending on the implementation, a CSS only lightbox can be 508 accessible, and a javascript lightbox could be inaccessible.
- bmelton 16y agoDepending on the implementation, a Javascript only lightbox can be 508 accessible, and a CSS lightbox could be inaccessible.
- akivabamberger 16y agocan someone post a screenshot of this in IE6
- augustl 16y agohttp://augustl.s3.amazonaws.com/dump/2010/css3%20lightbox%20in%20IE6.jpg 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 16y agoOut 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 16y agoSomeone 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/elioihkkcdgakfbahdoddophfngopipi https://chrome.google.com/extensions/detail/elioihkkcdgakfba...
- qjz 16y agoUnfortunately, 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).
- lwhi 16y agoIt provides a method to produce a 'modal dialog / window'.
- deleted 16y ago[deleted]
- krmmalik 16y agoDont 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 16y agoAgreed, that's very annoying behavior.
- seldo 16y agoIt'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 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 16y agoIt'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 16y agoThis also allows for the middle-click user flow.
- deaxon 16y agoI'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 16y agoThe 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 16y agohow do you detect mouse click with css3?
- BCM43 16y agoWith links.
- IChrisI 16y agoThis 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 16y 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 16y agoThis 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 16y agoVery 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 16y agokind 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 16y agoThe problem is that not all browsers support CSS3.
- dpatru 16y agoIt'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 16y agoDoes 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.