Be my fan on Facebook
Create a Lightbox effect only with CSS – no javascript needed
- August 22, 2007 by Emanuele Feronato
- Filed under Css | 320 Comments
You may call it Lightbox, or Greybox, or Thickbox, but it’s always the same effect.
When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fades the pagein the background to show you new content in the foreground.
I mean this effect
In the upper example, when clicking on a photo the site fades to black and shows the photo, in the lower one when clicking on “login” the site fades to white and shows the login form.
There are tons of Lightbox scripts in the web, each one with its unique features and limitations, but all require massive use of Javascript or the installation of javascript frameworks.
In some cases, there are “lightweight” versions with “only” 40KB of Javascript.
This example does not want to compete with those scripts, but if you are looking for a simple, 100% CSS, 0% javascript lightbox, this may help you.
Features of this Lightbox:
100% CSS as said
You can insert any content in it (some scripts out there only allow images)
That’s all. Did you need something more? Think wisely…
Let’s start with the CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; padding: 16px; border: 16px solid orange; background-color: white; z-index:1002; overflow: auto; } |
The black_overlay class is the layer that will make the web page seem to fade. It’s a black 80% opaque background as long and wide as the browser that will overlay the web page (look at the z-index) and at the moment is not shown (look at the display).
The white content class is the layer with the photo/login screen/whatever you want to appear in the Lightbox overlay. It’s a white layer to be placed over the black_overlay layer (look at the z-index, greater than the black_overlay one). The overflow allows you to have a scrollable content.
In the html file, put this line just before the
(431 votes, average: 4.46 out of 5)
Loading ...
Erm… no javascript? That title is very misleading. It’s a nice concept, and a good lightweight alternative to the libraries that are out there, but there is definitely javascript involved, and it’s non degradable.
[...] read more | digg story [...]
Yes, the title is misleading… maybe somthing more like “Lightweight lightbox with CSS”, seeing as there are atleast two lines of javascript… and maybe 75% CSS, 25% Javascript would be a more appropriate range.
A fantastic bit of code though, almost as good as some scripts I have seen, however, it doesn’t have a smooth fade, which could be added by having two darkening divs each on say 40% opacity, one opens on the click and the other on the loading/displaying of the lightbox perhaps… not sure how to do that myself, but I’m sure it can’t be too javascript intensive.
–Izzy
Don’t you get it? By ‘no Javascript needed” he means “not that many Javascript needed”! Sheesh. By the way, the lightbox was great…
Ok well it does use JavaScript, but give him a break it’s still pretty good and maybe the title should have been “Create a Lightbox Effect with CSS and a tiny bit of JavaScript” but that probably wouldn’t have sounded as good.
The title says “no javascript needed” yet there was javascript. This is misleading, maybe you should change the title. Still it is good, very little javascript instead of most of it javascript.
Most of the JavaScript effects also include many other options, such as automatic sizing, etc. ALL of them use CSS. How this got on Digg I have no idea.
He did make a mistake with the title, but I think what he meant was that there is no Javascript framework necessary. Think Prototype, script.aculo.lus, etc. Some of these weigh in at almost 300k.
Using two lines of standard javascript isn’t quite the same thing.
The main lifting of the Javascript is to manipulate class names. You just did what all of the other lightbox scripts do but yours is less bang for more buck. Good try though.
I’ve been working on a custom lightbox script at work although it is more of a modal pop up since we don’t want the in-your-face fade down. Just a quick “display:block” that turns on and off a div holding the folder positioned absolute.
Great script! Simple and effective. what is the -moz- in your css? I know it is for Firefox but is it a way to comment?
in mozilla, you could add a :hover class, and it would work without js. might be a little hard to use, though.
I tried using this sample for a form based webpage.
If I use a server side button, and a click-event handler for it will close it irrespective of any other action.
This implementation of the lightbox is good for a static (display only) webpage.
Good job though.
-Sashidhar Kokku
Yeah it’s definitely not CSS only. It IS possible to make a dynamic lightbox in 100% CSS, but it will be lacking fundamental functionality. I made the following example:
http://css.mezane.org/lightbox/
Click the thumb for the lightbox effect. Click outside to close it (this does not work on Safari because it doesn’t seem to pick up on :focus or :active pseudo-classes.) This can be expanded upon to not reuse the image in the document (you’ll notice it disappears while the lightbox is open,) but I made the solution completely degradable (otherwise there could be a second image that’s hidden in the CSS and then shown when needed.) The extra span element is undesirable as well and makes the source code look ugly. I don’t recommend this anyways. A CSS-enabled browser with JavaScript disabled (very rare) will simply have to live without lightboxes.
This won’t work if the page has to scroll, man. You need to display this stuff ‘fixed.’ And it’s not very practical with your 25% sizing; images would not be vertically centered.
Thing is, I think you know that, which is why your example is so simple. And if you want someone like me to donate, make a more robust example that works and I’ll consider it.
Yeah, you should change your title for this post. But your getting a lot of traffic from it so I cant blame you.
You’re just revisiting the days when people didn’t bother to make javascript unobtrusive like they should. This is a step backward, and it encourages other people to take a step backward (or more likely, to not take a step forward). This is the opposite of a contribution.
Ach, quit yer whinin’, ya bunch o’ babies. It’dunna use JavaScript.
Not good.
1.) It requires javascript to be enabled (this means non-degradeable), it means that the image will not be seen if JS is disabled.
2.) Why would you want to do this for every object you want to include in a lightbox.
here
Close
When you could just include any of a number of well tested libraries and just do this.
lightbox
If it’s size your concerned about I recommend looking into slimbox it uses the mootools framework and is under 7k.
How about “Lightbox with css and inline javascript only”?
Not totally free but reduced. Nice work here. How about “Lightbox effect with virtually no javascript”
How cross browser is this technique though?
Hi, Emanuele.
I improved your technique. I removed all inline JavaScript and wrote unobtrusive JavaScript code. It works very well in Firefox and IE7.
To make this technique more flexible, I included a function called getElementsByClassName, created by Jonathan Snook.
See the example
[...] read more | digg story [...]
Geez… what a dup. I came here thinking it was 100% CSS but only to find it still involved JavaScript.
Admittedly though it is a nice light weight idea and an alternative to the more fanciful version (lightbox, thickbox, greybox, etc.) out there, but there is a significant difference between this version and the fanciful versions, this CSS version has no graceful degradation should for some reason the client doesn’t have JS turned on or (heaven forbid) a JS incapable browser.
Still I commend you on a good try, but the next time you come up with something, try not to mislead with your titles.
I’m going to go against the flow and say the title was accurate. No javascript was needed for the lightbox effect. You do need javascript to trigger the effect.
Good work, I’m going to use this.
no javascript? Your a dumbass, your example is exactly how most greyboxes occur.
I will have to try it out, but that is definitely my biggest frustration, I cannot stand cross browser incompatibility. Has anyone tried to see if this works well in IE, firefox, safari, and opera?
–
Max … Out!
http://www.cmyos.com – free online operating system
Close but no doughnut.
Here is a real “no javascript” lightbox example
I’m searching for this script on net for long time. It’s very simple and superb. You are genius(in case if you have written this). Thanks a lot buddy :)
Cheers
http://mgopinath.blogspot.com
Andreas Blixt > Your CSS lightbox effect doesn’t work with Opera 9.2 browsers.
Misleading title but good work.
Thank you
[...] read more | digg story Posted by v1ruz Filed in Uncategorized [...]
I don’t know how other alternatives work, but I was working with a lightbox very similar to yours lately. With one difference, I had a few select fields (<select>) on my page, which seemed to overlay everything in ie (ie6 for sure, but I think ie7 as well). They would display over the .black_overlay and .white_content. The only solution I could find was to put an iframe under white_content, which is quite ugly and still wouldn’t fix selects displaying over black_content.
Has anyone else had a similar problem and found how to avoid it?
If we don’t look at the misleading title there are some serious problems with the code:
1) if you add more content to the sample page and need to scroll down content and see the box in the scrolled area, you can’t because the absolutely positioned box is above the visible area. And despite the fact that you open it, the visitor does not even notice it.
2) if you open the box and there’s enough content, you can scroll away the box.
I prefer jQuery with a modified jqModal plugin.
[...] Asà es, Emanuele Feronato ha decidido hacer un lightbox realmente ligero, ni siquiera necesita cargar un javascript externo, el lightbox se abre y se cierra directamente desde ordenes tipo onClick en los propios enlaces. [...]
works great, thanks!
The “onclick” event is a DOM event. It may call JavaScript, or some other sort of scripting language that may be available to the browser. It may also access DOM attributes and modifiy them, as in this case. But is not necessarily JavaScript.
http://en.wikipedia.org/wiki/DOM_Events
well had tried similiar things in the past, but not a foolproof option though. Lightbox and other scripts handle modal window professionally and a far better way, have no issues with almost any browsers and scroll thing.
I think geeks cud use this script for showcasing but for hard-core wannabes its a sure shot NO !
~sazwqa
href=”javascript:……
is a wicked sin.
It should be
href=”image.jpeg” onclick=”……; return false”
So if no javascript, folk still get the image.
VERY nice, so nice in fact I’ve started to incorperate it into a site I’m building:
http://muuveee.com/img/muuveee_login_box.gif
(I would give you a link to a real demo, but its only currently on my localhost/devbox ;)
When somebody clicks the “Login” link, up pops the box, click out of the box, it goes again, sweet! ;) and I’ve make it into an element using the framework I’m building, so where ever I need a login link, its ready for me in ~10 characters! =)
10/10, simple, easy, and quick! Cheers!
Not only your technique DOES use javascript (hell, the *first* thing you gotta see on your example is a link pointing to javascript:void() !!) but it is not even usable with javascript turned off, which is what alternatives are exactly good at.
Honestly I don’t see the point of this.
1) This lightbox method uses CSS
2) This is not new
3) i just wanted to list 3 things
Yeah, Very misleading, it blatantly uses javascript to show the box, so it is pointless.
You might be able to get the same effect working by using different overloaders for a:hover and a:visited to get the same effect, but I think the point about the javascript ones were that they do not necessarily load the content until requested, so save bandwidth that way – doing a full CSS option would negate that.
[...] Create a Lightbox effect only with CSS – no javascript needed at Emanuele Feronato (tags: css lightbox webdesign) [...]
[...] ThickBox y LightBox son 2 herramientas programadas en Javascript bastante elegantes a la hora de mostrar fotografÃas. Pero si no quieres utilizar Javascript, siemore puedes utilizar una alternativa hecha sólo con CSS, como la que ofrecen en Emanueleferonato, en la que tienes explicado todo el código y todos los pasos necesarios para crear el efecto. [...]
[...] Sadece CSS ile lightbox yapımını anlatan bir makale. Link [...]
[...] wonder woman drawings sketches You may call it Lightbox, or Greybox, or Thickbox, but it’s always the same effect. When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fades the pagein the background to show you new content in the foreground. hot wonder womanread more | digg story [...]
Another vote for _Misleading title designed for linkbaiting_.
“No javascript” means… no javascript. Especially not inline, obtrusive javascript.
@Tom Howard:
No donut for you either as your linked example is worthless if it doesn’t work in IE, like it or not.
[...] How-to… http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/ [...]
[...] You may call it Lightbox, or Greybox, or Thickbox, but it’s always the same effect. When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fades the pagein the background to show you new content in the foreground.read more | digg story [...]
[...] Create a Lightbox effect only with CSS – no javascript needed at Emanuele Feronato (tags: css lightbox webdesign design tutorial web html howto) « The Gang [...]
You are using JavaScript, fool!
[...] final fantasy fan sites You may call it Lightbox, or Greybox, or Thickbox, but it’s always the same effect. When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fades the pagein the background to show you new content in the foreground. final fantasy gayread more | digg story [...]
I haved made exactly the same by my own a few days after visiting this website… =P
[...] Create a Lightbox effect with CSS, without using any JavaScript! This is one tutorial I am definitely going to try out, because I don’t like to use JavaScript for all those neat effects that are becoming more and more common on websites.Read this tutorial to create a Lightbox effect with CSS. [...]
[...] Create a Lightbox Effect Only with CSS It’s a nice effect, but today’s kids want the JavaScript-enhanced animation, too. (tags: css lightbox webdesign design web html tutorial) [...]
[...] >>>>Read more [...]
Doesn’t work right in IE with XHTML transitional doctype
*yawn* This is what happens when the person first discovers the idea and starts playing with it. Later you will discover why your implementation is too limited and won’t work in the real world for big web sites. It doesn’t handle IE select bug. I am 70% sure it will break on pages with scroll bars, or will only work OK on some browsers but not the others when the scroll bar is up and the user scrolls the page.
To get this just right is not that easy. Even a big popular site like reddit.com has a very crappy lightbox. You can scroll down once it appears and click on the page below.
I actually implemented a lightbox that is more or less bulletproof, but obviously it’s not as lightweight as yours. The idea is that not all javascript is evil. Some of it comes from the fact that you know about web development and are covering more use cases. Just because there is some javascript doesn’t mean the person is just adding bloat. I’m amazed this actually got upvoted so much on digg, since it’s an amateur attempt.
0% javascript. um no. those code samples you have labeled ‘HTML’ contain pleeeenty of javascript. cool trick through for sure. it does not degrade naturally… yikes.
How do you do this w/ 2 links and want it to display 2 different items
Ex. link 1 will display 1 item, and link 2 will display 2nd item.
Thanks,
Jimmy
[...] Create a Lightbox effect only with CSS – no javascript needed at Emanuele Feronato (tags: css lightbox webdesign design tutorial web development ajax javascript web2.0) [...]
[...] Create a Lightbox effect only with CSS – no javascript needed (tags: css design lightbox) [...]
Hi there, very nice post, but im having a problem implimenting it on my website in currently building, it only displays the fade effect on half the website, I cannot get it to cover the full site… is there a solution at all to that or is that the lack of CSS??
[...] Read more… [...]
Cómo crear un Lightbox con CSS y sin librerias Javascript
Los efectos tipo Lightbox para mostrar imágenes o páginas de login pueden resultar muy útiles.
Cuando se empezaron a utilizar de forma masiva hace cosa de medio año fueron usados de forma tan exagerada que hoy en dÃa parece que hayan desaparecid…
[...] Create a Lightbox effect only with CSS – no javascript needed at Emanuele Feronato (tags: css lightbox webdesign design html web tutorial) [...]
[...] [...]
[...] Visitar la web: Create a Lightbox effect only with CSS – no javascript needed Sindicar RSS 2.0 [...]
[...] Para implementar este efecto se suele usar un scritp de JavaScritp. Al ser tan pesada la librerÃa este scritp, muchos dejaron de lado el efecto Lightbox ya que lo creÃan muy lento. Recientemente se ha publicado (sigt también habló sobre esto) otro modo de implementar un Lightbox, que intenta no basarse tanto en JavaScritp y si en hojas de estilo CSS. [...]
I’m a user not a creator and I rarely comment on other people’s work in a negative way but:
I have seen very similar years ago when I played around with animated emails.
I was impressed with such things then but now I’m not, the average user doesn’t care how effects are created or I suspect even notice them.
@Sean O:
I agree it’s useless for real life use, but it’s meant to be a proof of concept to demonstrate what can be done with JS alone. I could have compromised and simulated :target in IE using JS, but that would have defeated the whole purpose of the demo.
Bullshit you liar. Hehehehe!
[...] Lightbox’ı ister sitesindeki haliyle kullanabilir, ister WordPress için eklenti haline getirilmiÅŸ ÅŸeklini kullabilir veya ÅŸurada anlatılmış css versiyonunundan yararlanabilirsiniz. [...]
[...] Create a Lightbox effect only with CSS – no javascript needed at Emanuele Feronato (tags: css lightbox webdesign design html tutorial web howto **) [...]
[...] Create a lightbox effect with CSS – I’m not sure how this works, I haven’t had the time to try it yet. I challange you to make this work and show me an example before I get the time to get it working. [...]
I really liked Andreas Blixt’s ligthbox… 0 javascript… yours is cool too, but the I thought NO JAVASCRIPT NEEDED meant NO JAVASCRIPT NEEDED. Good job anyway, you got your cookie!
I don’t know if anyone else mentioned this, but when I cross browser tested the code, there is a white strip on the right hand side of the browser in IE6 for PC. It is an easy fix though, just change the body tag to:
…then it works fine in IE7, IE6, Firefox and Safari!
I also noticed some issues with centering/scrolling in some browsers, a minor problem, however It may be worth checking out!
Thanks for contributing your efforts, Ignore all the negativity, keep hacking away at the problems (and please change the slightly-misleading title)
Good work….
Thanks
-Charles
Ah…
I just noticed no one can see thee code I included, I forgot about the “html injection prevention” most sites have, anyway just add a margin of 0 to the left, right, top and bottom for the body tag…
-Charles
Thanks, it works!!! i’m going to use in many sites!!!!
very nice, still needs javascript but nice and light and does the job. Good post
[...] Lightbox’ı ister sitesindeki haliyle kullanabilir, ister WordPress için eklenti haline getirilmiş şeklini kullabilir veya şurada anlatılmış css versiyonunundan yararlanabilirsiniz. [...]
This is nice, i tried to write something like this without the scale and fade-in effect but got the the problem to cover the whole screen with the 80% layer. However you seem to have it worked out and very lightweight to, this for sure will come in handy since im sick of the fade in stuff that takes 2-3 seconds per image to scale and fade and AHHHH!
Thanks :D
Hi,
Awesome work, for those of you who wants to see it working in a real functioning website. See mine! It has made my site that much more pretty on the eyes!
URL: http://www.sbuguide.com/
CLICK ON THE CONTENT BUTTON.
If you make the boarders and padding smaller, the box looks more centered. I have mine at 5px.
Tony Cai
http://tonycai.com
[...] Very useful post of Emanuele Feronato: Create a Lightbox effect only with CSS – no javascript needed [...]
[...] Link: Emanuele Feronato [...]
check here
http://tanny.ica.com/ICA/TKO/test.nsf/suckerfish/examplefix3.htm
it seems that the selectbox is hidden.
Great! That’s what I was looking for!
[...] me hice valer, sobre todo, de este material: http://php.net/ http://codex.wordpress.org/ (AJAX) http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need... [...]
Give the guy a break! So maybe it isn’t 100% perfect for every single browser and its not 100% js free, but it is only 2 LINES!! Compared to many other solutions, this is f**k to achieve a nice effect that has many applications. If you need more functionality or cross compatibility then use another solution.
People should appreciate the fact that guys like Emanuele are prepared to actually share their experiences with people.
[...] on the work done here I created a flash lightbox for the Dreamway website. I needed a lightbox to present flash files [...]
Hi guys,
Based on your work I created a lightbox to load a flash file. I call is SWFbox – you can find it here:
http://www.makesites.cc/programming/by-makis/swfbox/
If you can make further improvements on it please be my guest.
Looks like all the Javascript does is turn the display: none into display:block for both divs. You could easily do this with PHP instead of javascript. What I did was just keep display: block in both classes and when I want the lightbox, just dynamically include the divs on the page with PHP.
Or if you really want just a 100% CSS solution.. you could just link to static pages with the lightbox divs coded in. Doubt people would even notice.
Thanks a lot bro! Congrats, its really clean and better than lightbox.
Superb….Very Useful too…
I agree, a bit miss leading on the title considering I see a bit of Javascript. :p
[...] read more | digg story [...]
[...] Lightbox with just CSS Expect to see this at TSR in some fashion soon. [...]
I’m mexican, and I would like to thank you for the guide to make the efect, I’ve been searching an other like this but in your site is that I need for my page. Excellent!!!
If you have a pdf tutorial or something like that, where I can learn the css language could you send me by mail please??
Thank’s a lot, very nice!!!
Sorry for my English it’s not very well
[...] is an effect that fades the pagein the background to show you new content in the foreground.read more | digg [...]
[...] haliyle kullanabilir, ister WordPress için eklenti haline getirilmiş şeklini kullabilir veya şurada anlatılmış css versiyonunundan [...]
I just implemented this and loaded some content via a prototype ajax request, and it functioned perfectly!!!
Thanks, I have never found such a simple lightbox, and this is it!
Implemented and lovin’ it. The title “no javascript required is spot on”. It didnt require me to code any javascript at all…..copy and paste. Alot easier than those other libraries which need to be configured.
Thank you very much.
[...] plus ou moins riches en fonctionnalités : LightWindow Greybox Lightbox effect without Lightbox Lightbox FX en CSS (et un poil de js) Modalbox Thickbox 33 plugins à base de MooTools (très intéressant) et bien sur l’excellent [...]
WORST, LEAST degradeable JAVASCRIPT lightbox I have seen in quite a while. If you are going to go that ugly inline approach, at least keep the href pointing to the image and add an a return false to the end of the onclick. And you are adding the same kilobytes, just manually to your html, where it can’t be cached just once in a js file.
And the title is false, a blatant lie and misleading. It’s fine for those of us who know better, but for the noviates it’s aimed at…. Basically this is bad google baiting/trolling. I assume the author knows this too, based on the good google results for “css no javascript” posts get and the out going links to a commercial site.
[...] 英文原文地å€ï¼šhttp://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need… (No Ratings Yet) Loading [...]
thx a lot!! It’s really useful
Hi to everybody!
I just want to say that I did an adaptation to call lightbox v2 from flash movies, if you want to check it go to:flash lightbox v2
Good work!
Alan
Hi, every body :-)
Thanks a lot for that nice solution : very simple and efficient :))
So long…
This is just what I was looking for THANK YOU for making it available to the public!!
Michael
Thank you very much for this script. I have been searching for this script about 5 hours. Finally i got a right script over here.
I tried your lightbox, but it sits under my flash header… that means the flesh header is covering up the box. I think this have something to do with z-index in css but as I can see it is set up on 1001, so I guess there is no point of putting higher number. :) Does anybody have similar problem or solution for this?
>parsi
Add to FLASH param:
Hello,
very cute little thingy, will try to replace those javascript intensive lightboxes.
Nice work!
You guys are so outa ir – This guy makes up sum thing which u can use FREE. Dont dis him and dont compain. he is not chargin u to view it. And plus the concept can be easily improved.
Think a bit
wow you guys bitch alot… why even bother posting anything if you guys are so damn quick to jump down the dude’s throat.
@Brian, well, except he’s trying to improve on what were improvements on this original idea he apparently considers too bloated and on top of that feels the need to exaggerate a claim that is not true. e.g. Slimbox plus dependencies (mootools) weigh in at a lovely 26kb, is feature filled, not as glitchy, definitely gives off the polished look, and degrades nicely. Uses mootools, but will it kill you to use a javascript framework that (for slimbox) weighs in at 19kb? Also, what’s with the big concern over size..after all, one of the more popular uses of this particular technique is for displaying..oh, images. I highly doubt those images would weigh in at under 26kb, so if it makes so much of a deal to your end users who are all on dialup or something (i mean, look, you might even save some bandwidth in the long run as they get cached)…
I think most of the grumbling is coming from the crowd expecting 0% javascript and seeing inline javascript only after beginning to read this post, and not even a good example of what the author was trying to illustrate. It was a waste of time, that’s why everyone’s complaining. :)
Also I might point out that pretty much all of the Lightboxes out there are also “free”, and that the author comes out pretty strongly against pretty much all of them on the basis of being bloated/unnecessary/using frameworks..you know, also known as complaining. Soooooo…
The script is cool and pretty simple. I was just wondering how or if I could implement that same code in the following example:
I want the page 5list.htm to be the white content
on page load. I dont want someone to have to click on it.
Like if I go to http://www.ww90990.com as soon as the
page comes up, I want the white content to load with the black overlay.
Can you tell me what code I would use instead of onclick. The exact code, if you will. Because I am using onload, but it is just not working right.
Any help and assistance would be great.
Thanks
I think this is great. I’ve been looking for a barebones lightbox script that i can customize. thanks.
Anyone else think that Digg traffic is inherently useless?
Thanks…..
It working fine in mozila but in IE i am facing problem.
There is another divs in my page. it dosen’t get overlap.
Great!!!!
simple and efective
great it works
[...] Originally Posted by William Thanks, does look nice and interesting, but I plan to do everything myself. Then this may be of interest: Create a Lightbox effect only with CSS – no javascript needed : Emanuele Feronato – italian geek and… [...]
Just curious, how would to go about making the blacked out layer 100% of the webpage, instead of just the size of the screen? i used this on a page that was longer and if you scroll down the black div just ends..
You answer to parsi was cut off. What was you solution to the Flash problem parsi hand?
Thanks in advance.
>>> I tried your lightbox, but it sits under my flash header… that
>>>means the flesh header is covering up the box. I think this have
>>>something to do with z-index in css but as I can see it is set up
>>>on 1001, so I guess there is no point of putting higher number. :)
>>> Does anybody have similar problem or solution for this?
>>>
>>>gagle | Jan 21, 2008 | Reply
>>>
>>>>parsi
>>>
>>>Add to FLASH param:
Very nice tips. And theres no mootools or something heavy. I like this much. Thanks
cuz i digg it
it would be much better if the position of both the black_overlay and the white_content was set to “fixed” instead of “absolute”. This means that you don’t get Josh’s problem where the black overlay runs out if you scroll down.
If you leave the white_content’s position attribute as absolute, you can make the shade stay there, but the white_content stay where it is and scroll off the screen.
Hope this helps someone!
Izzy
[...] haliyle kullanabilir, ister WordPress için eklenti haline getirilmiş şeklini kullabilir veya şurada anlatılmış css versiyonunundan [...]
The problem here is that if you use the javascript the end users can get a warning that turns them away from the site. No means No not oooooh a little bit’s OK.
Nice effect bad title
superior work, elegant, the best out there man
Hey, I tried the lightbox on a new site design, but I can’t get it to work where there is more than one image being clicked, with a different image per thumbnail–they all share the same pic. How can I make it so I have multiple images (like 14 or more) on a page, with different respective counterpart images in the lightbox?
[...] 11. Create a Lightbox effect only with CSS – no javascript needed [...]
Give the man a break. Who cares if their is some JS. Its a great alternative.
[...] Create a Lightbox effect only with CSS – no javascript needed [...]
[...] Create a Lightbox effect only with CSS – no javascript needed [...]
[...] Create a Lightbox effect only with CSS – no javascript needed [...]
mmmm title is misleading, however it was just what I am after. Tip of the cap kind shrew.
Thanx for this very best ModalBox on Planet!!! Work perfect on Windows XP/2000 with
IE 5.01(!), IE 5.5, IE 6, IE 7, Opera 7,8,9, Safari, Firefox, Netscape Navigator
Only old browser can not realize the opacy filter function, but the box have correct porsition and size with a black background! Perfect!
Namastey
Snark
Activate opacy on Linux systems with Konquerer
Add on CSS:
-khtml-opacity:0.7;
[...] bir blog uygulaması # Css kullanılarak lightbox efekti oluÅŸturmak üzerine güzel bir yazı # Burcu DoÄŸan‘dan jQuery üzerine çok güzel bir videolu anlatım # Grafik kullanmadan css [...]
What a bullshit article. I guess the author does not understand what “percent” means.
This is not 0% javascript.
So I put a video in the box, and that works fine, except for when I close it. After I close it, the sound continues to play. Any help?
yeah I think we have now clarified that it does use a ‘tiny’ bit of javascript but whatever…
…can someone help me out on how to make this work if the page scrolls??? clint mentioned something about using ‘fixed’ display…any comments welcomed!! At the moment it would appear to only fill the screen dimensions anything else does not get covered by the black box???
Nice little script you got there. Sure it needs some javascript, but hey, this is still an alternative form of lightbox.
Thanks for sharing!
maybe it doesn’t even matter if there is javascript or not! just a line or two it still works doesn’t it? all you who don’t appreciate how amazing this is for me! i think i’ll put this on my website its so amazing!
Does this work for multiple Lightboxes? (not at the same time, just different links on a page to open a lightbox with different content)
@Tom Howard:
BIG donut for you!!!
if your PoC could degrade in IE to thumbs that point to larger versions opening another window it would be perfect, and is what we should do from now on, design for sane browsers and degrade to IE (in a ugly way! consistent with an ugly browser).
Sorry if this has been addressed already…i didn’t feel like reading the thousand comments that complain about the F’ing title.
Forms with select options underneath the lightbox show through in IE. Firefox works great for what i’m trying to accomplish…any idea’s on addressing the select in IE tho?
yes it does…just give them different id’s ex.
#
This is the lightbox content. Close
#
#
This is the lightbox content. Close
#
Wow cool!
Exactly I was searching for my login page! People sometimes forget to keep things just simple.
greta, the css is not valid :/ ….
Man, people are such whiners!
As someone who was asked to implement a simple lightbox for her organization’s site, and isn’t very comfortable with JavaScript, I’m very grateful that you created this and shared it with the world. The amount of JavaScript that there is or isn’t in what you published is perfectly fine with me. The JavaScript required for a “real” lightbox is over my head, but I think I’d be able to implement this. Thanks!
I got this code working pretty easily with an iframe instead of a div. BUT the last issue I seem to be having is, the “lightbox” is always the size of the browser window, but its always at the top of the page, even if the page is scrolled somewhat when the initial link is clicked. Is there someway to change this behavior? So that the lightbox (and blackout) are always centered on the browser, at least the browser as it is when you click. ?
Suggest if you use position: fixed in both classes the lighbox and overlay will remain stationary when scrolling the page.
Unfortunately this only works in IE7 when using Strict DTD
Nice Tutorial i am very happy. Thanks
I have some select boxed and frames in my pages and the light box doesnt work as it should.
I forgot to add. Try in IE with a select box in the main content.
Its very cool but it doesn’t support DDT doctype,
how is it possible.
i have an issue, when the browser content is bigger then the black background has not covered the whole screen of the browser.
anyone plz solve this issue.
[...] Ref. emanueleferonato.com [...]
[...] Pri trenutnem projektu sem potreboval navaden lightbox efekt. Naletel sem na Älanek na sledeÄi strani, ki je super zadostil mojim osnovim potrebam: http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need... [...]
It’s great. Sorry for me grammar. I’am from belarus. May I translate this lesson to Russian. And publish it in web. It’s often need, but no so good tutorials on Russian language. Of course I will write that real author Emanuele Ferontano and I only translator, and publish link for this page.
Sure, stasan!
Thank You!!!
Excellent, excellent work! I love the lightbox concept, but each version I’ve looked at so far (GreyBox, LightBox, etc) has been based on some idiotic javascript framework with 1000s of lines of code. This version is just beautiful, you get the same exact effect (even better, since it doesn’t have the annoying animations) with code you could write on a napkin. Thanks guys!
when more than one images are on the same page, when clicked on, they all load the same image in the ‘lightbox’. Is there a way around this? Great code by the way, will be even more useful if it works for multiple images on same page (about 10 images per page i need for portfolio example)
Regards
Will
ah solved it now – novice error just had to id each image differently. Looks fantastic thanks once again.
Wow ! I really love this alternative.
(No matter the title……. it helps me to find your article on search engine !) ;)
Thanks. Lea.
The title “No Java script needed” is misleading. but the work he did is greate coz java involved here slightly. Otherwise we also must be know that without java, only css cannot do this!!!
[...] Via:Emanueleferonato [...]
Despite being slightly misleading, there is no need to set-up js frameworks, and so this is a brill solution for implementing lightbox-type effects in iframes (for iWeb and the likes).
Granted, it’s a basic solution, but as far as I can work out, its the only way to implement such effects without calling up external scripts.
Been trying to implement it into a site I’m working on in iWeb…
http://www.webmywedding.co.uk/products.html
Go easy – I’m only a hobbyist, and the site is still in development!
nice script! i will try it in my next project
Hi,
Thank you for nice work and not adding libraries or junks that’s why I preferred your code out of all lightbox 2, 1, jquery lightbox, prototype.js etc etc.
issue # 1)
height in percentage doesn’t work when page height is longer.
Solution: Define exact height of page in pixel solved that problem.
issue # 2)
with flash it doesn’t work normal especially vertical and horizontal alignment.
solution: add table with one cel across popup div only and define exact height and width, well running out of time honestly i already have tried 7 light box from web sites all were junk your one found best will paste whole code someday later.
issue # 3)
I could not solve yet is: if ucrrent browser window is half or full or increasing or decreasing height wise this div should float vertically center/middle.
[...] guia (no pude escribirlo directamente ya que se descomponia el codigo) claro basado en la del autor del efecto. visto en [...]
Really Useful
FYI changing the position property from absolute to fixed solved the scrolling problems as far as im aware!
nice will use this a lot!
js or not js, it works where I needed it. Thanks.
Please add: height:4000px; in a conditional IE <=6 statement for the background div, the 100% won’t work on IE6.
js or not js, it doesn’t works where I needed it. Thanks.
Please add: height:4000px; in a conditional IE <=6 statement for the background div, the 100% won’t work on IE6.
[...] t̩cnica fue originalmente explicada en Create a Lightbox effect only with CSS Рno javascript needed en donde se explica que este efecto de mostrar un div que sobreponga todo el html, se puede [...]
[...] Crear el efecto de lightbox solo con CSS Navegando me encuentro con este tutorial, interesante para aquellos que no deseen utilizar javascript para crear el efecto de Ligthbox, pueden usar esta técnica utilizando únicamente CSS. DESCARGAR [...]
[...] javascript para crear el efecto de Ligthbox, pueden usar esta técnica utilizando únicamente CSS. DESCARGAR Visiten mis aportes [...]
[...l efecto de Ligthbox, pueden usar esta técnica utilizando únicamente CSS...]
Very helpful one
position: fixed does not work for me because my HTML is not strict and I cannot change it. I will try setting body {overflow: hidden;} now …
ok. setting overflow hidden on the body worked for me. also I needed to scroll to the top with scroll(0,0). now it looks good
[...] http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need... [...]
thanks to share this, very helpful!
Very nice Lightbox Content tutorial..
there is no javascript needed.. the point of the title was to say that to have the lightbox positioned properly on the screen there is no javascript needed to detect browsers, or position divs or whatever, such as the jquery thickbox library.
of course you need javascript to control the opening and closing of the lightbox, anyone who opened this article thinking as much should give up web development LOL
how to disable page shadowing effect, just show only popup image? (css popup)
Thanks a lot. Now, I have learn how to create a Lightbox.
Not pure css, but good work. I use
Visual LightBox, VisualLightBox.com to setup
Lightbox script and thumbnails. Will your implementation work with VisualLightBox?
I wonder how many idiots are out there with no money and no brain to do their own effects.
Hi Emanuel. Thanks for your Technique. It’s very good. It was really helpfull.
I want to enphasise the positive aspect, that is all. Of course, it uses a little inline Javascript to manipulate the DOM. Othewise, nothing would happen.
Well, best for you! And wait you feature a new one in the future with some more javascript ammount there…
[...] Bastante cómoda si no encuentras un lightbox que se acomode a tus necesidades….. de seguro que aquà encuentras lo que necesitas. Yo aún no doy con lo que necesito asà que me haré un mega-super-ultra-liviano lightbox con este css. [...]
Absolute lifesaver. Thank you so much.
It seems that if you have a long page and you’ve scrolled down and then launces the layer – it’s only visible at the top of the page? Then you have to scroll back up?
How to get around that?
coool.. no need of an external js
loves it. Super lightweight, that’s exactly what I’m looking for. no scriptalicious or mootools or jquery or prototype required; seriously, 300k + for a nice looking modal is overkill. this is perfect, thanks! I can easily modify the concept to fit my needs exactly.
hi, its great. but all the problem is with IE 6.0. The lightbox effect does not working fine if there are SELECT boxes. Try that.
[...] | Google Search Engine Ranking FactorsCSS(網站) CSS語法教å¸(網站) Moving Boxes(網站) Create a Lightbox effect only with CSS(網站) CSS | Smashing [...]
Hey, this is a nice example, but if I have a Flash (.swf file) in my web page the light box just goes below the Flash file, I tried to overcome this by using Z-index , but its not working , let me know if anybody has a reslove/fix for this ..
Cheers .. .
[...] is another useful technique that is using CSS and a little Javascript to create the lightbox [...]
Andy, try add to swf function this param
or
Nice ariticle
I tested cross browser the code, there is a white strip on the right hand side of the browser in IE6
remains are IE7, IE6, Firefox and Safari works fine how to solve this one.
[...] technique [...]
Those of you that are having problems with flash need to add a “wmode” to your flash embed code. Adding something like this property should work and then allow you to z-index the position.
wmode=”opaque”
Without it your flash will always be on top of everything else. That’s the default.
I can’t believe peeps here are giving the author grief about whether or not this contains javascript. As far as I’m concerned, it doesn’t. A couple DOM calls versus all those bloated 100k+ .js files out there you’d have to add is NO comparison. Oooooh, and if the browser can’t handle javascript, it won’t work.
Can’t write a check yourself? Jeez.
Well done sir. This is exactly what I’m looking for!
[...] technique [...]
Ok..you claim you have no JavaScript fine..you do whatever, however then you go on to say your using AJAX…which is “Asynchronous ..here it is…JAVASCRIPT and XML” learn your terminology retard.
you destroyed your own argument of no javascript..good job.
I’m a student designing my first websites and I really wanted to integrate a lightbox into my pages. Your script is simple and easy to manipulate. Thank you for sharing your gift!
[...] [upmod] [downmod] Create a Lightbox effect only with CSS – no javascript needed at Emanuele Feronato (www.emanueleferonato.com) 2 points posted 1 year, 8 months ago by SixSixSix tags css imported [...]
Great little tut
I’m always wondering if I should use javascrpt or not.
This might be the solution to achieving the same effect.
i’m trying to make this work for my website but can’t really quite get there. i already have my links set up and just want the lightbox to work iwth them. instead of against them. its just not working out.
my current link tag is this
_______ where i’d want each “box” class be a link to a lightbox. how exactly do i intergrate this. HELP! plzzzz i would really appreciate it.
ooook… i duno why it didnt’ show up.
its a div inside a few divs. i just dont’ know where to put this new div to make it work.
Why is everyone complaining about this script using “javascript:void(0)”
If you do not want this javascript statement in the page, you can replace it with “#” and it will still work PERFECTLY fine without
“javascript:voice(0)”
And as someone previously stated, onclick=”" is a DOM event.
I personally use this script and I have no problems with Firefox and IE7 or IE8 using “#” as the link target destination.
works fine, thanks !
Many thanks for this brilliant lightweight Lightbox – works great so far as i’m just displaying text…will try images and flash at some point.
FOR those of you having PROBLEMS with:
(1) Black overlay not covering the entire screen when on scroll/large pages
AND
(2) White box not being centered on scroll/large pages
SOLUTION:
set css black_overlay & white_content position: fixed; rather than position: absolute;
@SARAH, number 158
Sarah the lightbox shows in the ‘white content’ everything within div id=’light’ and the relating javascript code, document.getElementById(‘light’).
Therefore if you want different things to show up in the lightbox then you will have to give them a different ID, e.g. div id=’light2 & document.getElementById(‘light2′), div id=’light3 & document.getElementById(‘light3′) and so on.
I’m sure someone here can do something with functions to simplify this? – here i have two examples, calling FADE as it is constant for the opacity effect:
**JS**
function showLightbox()
{
document.getElementById(‘light1′).style.display=’block’;
document.getElementById(‘fade’).style.display=’block’;
}
function closeLightbox()
{
document.getElementById(‘light1′).style.display=’none’;
document.getElementById(‘fade’).style.display=’none’;
}
function showFade()
{
document.getElementById(‘fade’).style.display=’block’;
}
function clearFade()
{
document.getElementById(‘fade’).style.display=’none’;
}
**HTML**
Link 1
hope that helps.
sry html code doesn’t fully show…
**HTML**
a href=”javascript:void(0)” onclick = “showLightbox()”>Link 1
input type=”button” name=”NoDontAgree” value=”No, I Disagree” width=”20″ onclick=”closeLightbox()”
/div
///lightbox end
Thank you very much…
Few people wrote that the Title is a mistake becuase its not only CSS..
but..I came here becuase I read it!..
and It’s working perfect!..
Be grateful..all the time!..This person is shareing with us. (oh too confortable find all the info easy!without mistakes..Its not ok!…Try to do the best too!)
:)
Im very graeatful!..
[...] Source: Lightbox effect in pure CSS: No javascript needed! [...]
100% that’s javascript.
Fails if javascript is off. Not only does it fail, but it doesn’t even degrade.
“No JavaScript Needed” – Bullshit.
[...] ???Lightbox effect in pure CSS: No javascript needed! [...]
Hey,this is a great code and quite simple for beginners like me, but it’s not working with apdivs’.Can you do something about it?It’s getting on my nerves.
[...] ??:?CSS?Lighbox??:??Javascript ? [...]
[...] Creating Lightbox with CSS [...]
[...] ??:?CSS?Lighbox??:??Javascript ? [...]
[...] Si te gusta el efecto Lightbox ese redimensionado de las imágenes sin salir de la página, debes saber que no es necesario usar Javascript, lo puedes conseguir solo con CSS. [...]
BEAUTIFUL! It works beautifully! Just made the suggested change from “absolute” position to “fixed” to keep the content in place on large scrolling windows. Awesome! Works on Safari and Firefox for mac.
[...] Creating Lightbox with CSS [...]
hi guys
I NEED HELP, PLEASE!!!
i’m trying to link a new image to every new thumbnail in the lightbox, every time i click on a thumbnail, the same picture appears. how can i get a new image to load up each time i click on the thumbnail.
does someone have the code for this and could you please tell me EXACTLY where i should put that code. because i new at even using a little bit of javascript, it’s all a bit confusing for me, i need to know EXACTLY where things go, maybe some one would be nice enough to give me the whole code regarding the images, maybe this is where i am going wrong, HELP, HELP, HELP.
by he way, this code looks really good, i just need to get the above working.
cheers guys
toni hearn
[...] ??:?CSS?Lighbox??:??Javascript ? [...]
This doesn’t work if scroll is there,what i mean to say is that white fading background is only for full screen with no scroll,if scroll comes white fading background is not completely covered
Hello, what code I have to put to open another html page in the box? Thank u
I tried changing position from absolute to fixed in both the css class ,still its not working
[...] mfg Timo Ich würd auch auf eine Lightbox setzen, dazu brauchst du noch nicht mal Javascript. Create a Lightbox effect only with CSS – no javascript needed : Emanuele Feronato __________________ Ich kann allem widerstehen – ausser der Versuchung Oscar [...]
[...] 13. LightBox Effect Using CSS Only [...]
Hello,
Thanks for the script! However, I can only get one image to work. What parts of the script do I have to alter if I wanted more than one link on the page. I have created little icons and want different images to come up when they are clicked on, but the same image keeps coming up when I click on them. Please help!
Thanks!
its not working in ie 6
http://www.cssplay.co.uk/menu/lightbox-click.html on Stu Nicholls’ CSS site ONLY uses CSS (but doesn’t work in SAFARI & CHROME due to the way they handle mouse clicks).
But http://www.cssplay.co.uk/menu/lightbox-hover.html does work in those browsers (using HOVER to activate, instead of mouse clicks).
No – I have connection with CSSPLAY – just luv what Stu does with only CSS.
Alan
[...] technique [...]
Hi Emanuel,
Thanks for the lightbox. It works perfectly in
IE 7 and above, safari and mozilla but not working properly in IE 6. Needed help regarding the same.
Even though this is not 100% JS free, it is a very simple way to do a nice and simple lighbox when you have a very limited number of images to show.
I changed this:
- “position: fixed”
- “-khtml-opacity: 0.8″
- “text-align: center”
and then i put a “height: 99%” on my images to make them center vertically and show at maximum size without any scrollbars.
This is not pure CSS at all as you have Javascript changing the class. This solution is also not semantic as you have an empty div element. Perhaps you could consider using a little more Javascript and dropping the empty div into the DOM or getting even deeper, appending a div to the DOM and appening the “white” content inside, then style the content from the center so you’ve now no empty elements.
Hi All,
I found out the issue actually in my web page I was using dropdown list boxes which were been rendered from the database when I was triggering the light box on click of a link the black_overlay class and the white_content was not covering the entire web page it was not able to cover the dropdown list boxes with the defined color in IE 6 Browser.
Due to which it was not able to display the light box properly in this browser even though it was working in all other browser’s including version >IE 6. I tried using image as background which din’t work.
I GOT THE SOLUTION FROM ONE BLOG:
– make the dropdown list box visibility false before the lightbox is triggered and again retain the previous state for the drop down box as visible.
This can be made using a simple
for retaining again make the same as
for the drop down boxes whereever used.
This solved my issue.
Hope this would be of some help. So posted it.
But No Problem with the CSS LIGHTBOX given above its working perfectly in all the browsers.
Good Work Emanuele thank you…. :-)
In addition to the above reply use the
div’s display:none; and display:block for hiding the dropdown list box
[...] http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need... [...]
No javascript needed?
I think not as it doesn’t work with firefox and safari (javascript disabled)
Thanks!
really simple and effective alternative.
Thanks! It was a nice tutorial! Finally learned!
[...] Source: Lightbox effect in pure CSS: No javascript needed! [...]
[...] Shared Create a Lightbox effect only with CSS – no javascript needed : Emanuele Feronato [...]
Nice tutorial, but i have question, when the large amount of contents comes from the behind the popwindow then the lightbox will not cover the whole area. can this is possible with CSS. please reply me.
[...] [...]
Thanks! awesome tutorial !
In case javascript is unsupported, I think the best way to implement the link is:
Click me
instead of:
Click me
I removed the javascript from the href, and placed a return false at the end of the onclick handler to halt the triggering of the link.
Oh well, the HTML code is displayed, sorry for the the previous post.
so replace the :
href = “javascript:void(0)”
onclick = “document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block’”
By:
href = “#”
onclick = “document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block’;return false;”
Also, if the page is longer than the window size, the position absolute will give you a problem.
It might be interesting to try to replace:
position:absolute;
by:
position:fixed;
Ok, I’m gone now :)
[...] poco de teoría Esta técnica fue originalmente explicada en Create a Lightbox effect only with CSS – no javascript needed en donde se explica que este efecto de mostrar un div que sobreponga todo el html, se puede [...]
If I use this in a frame, the black_overlay covers only the frame it is in, not the entire window. Is there a way to make it cover the entire window?
Regards,
David
hi
am using a lightbox application, which is coming in half window size, i need the light box of full window size.
Please help me.
Really useful!! Thanks!
Is it possible that one day we see this example with some php/ajax code to make it more dynamic?
Thanks again! :-)
hi it was wonderful work
thank you at all i just suggest to se how you can include some of jquery code in this code to make it more animation
waiting for your response and i will follow this great blog
i think this code will make it work with more animation
$(document).ready(function() { $(“#light”).show(“slow”); light(); });
Fussy lot aren’t you!! Its straightforward to make it degradate so quit moaning and just sort it out yourselves. He has left it like that to make it easy for everyone to get the delightfully simple technique…
I was researching this effect on countless blogs and in my humble opinion your code was the most direct and appropriate. You really put the house in order to follow a pattern and let that part of the vision over the control with CSS and JavaScript.
Congratulations for your great job!
[...] is another useful technique that is using CSS and a little Javascript to create the lightbox [...]
[...] Create a Lightbox effect only with CSS ? no javascript needed : Emanuele Feronato – italian ge… (tags: javascript lightbox css) [...]
Nice job with the light box! It’s pretty cool!! One thing i found was, if i added a large image, i had to scroll to see it. If you get this problem, what i found you can do is change the “white_content” part of the head code to say this:
.white_content {
display: none;
position: absolute;
top: 1%;
left: 25%;
width: #%;
height: #%;
padding: 16px;
border: 16px solid #EDF5FA;
background-color: white;
z-index:1002;
overflow: auto;
This will make the white box as big or small as it needs to be for what ever is inside it. One problem with it however, is that the black opacity behind it cuts off down the bottom, so you may need to change the line “height: 100%” (under .black_overlay), to about 120%, or until it works..
Great script though! :D
Ok, i’m getting this problem. I’m trying to make this a custom BBCode on my forums. It’s working, except some of the buttons appear over the top of the black overlay. I’ve changed the z-index to crazy numbers like 999999999, but it still did nothing. Can anyone help me please?
thanks alot for your wonderful code. It works perfectly for me.
I am looking for using this lightbox method on one of my websites, i want to show the privacy, about us etc content on the light box, what would be the best way to implement that
The only problem (I think) is that if you click outside the highlighted box that means in the greyed area, the window doesn’t go rather you need to click the close icon. This doesn’t happen in other lightbox.
Thanks, cool post! I found this by googling “how does a lightbox work”, and your simple solution does a great job of explaining the essential trick – the black div with z-index and alpha properties. Thanks for posting!
[...] [...]
Hi all,
Glad to find a solution here without changing too much in Joomla! for example.
But as lots of you asked, I wonder how to handle a page with lots of pictures here.
Thanks for sharing and in advance for your help.
The script works good ! But the only thing is I want to add more then one link to the lightscript box on the same page and I tried to do it but only the first link displayed with the first content? How can I use more then one link on the same page with different content in the light box for each link?
[...] http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need... Share and Enjoy: [...]
2 questions:
How would the code look like if i want to click on the opened picture and close?
How would it look like if i want to position the bigger lightbox image above and relative to the thumbnail like right corner of thumb is right corner of big picture?
Cheers!
Title is very missileading last time I knew
javascript:void(0)” onclick = “document.getElementById(‘light’).style.display=’block’;document.getElementById(‘fade’).style.display=’block’
was javascript!! :(
plz help me how to show multiple page using this way.i make this and show only one page bur i need to show 3 page in this way
using this example can show one page but plz how to show 2 or 3 page in the same way.plz plz
i use the code………
LIGHTBOX EXAMPLE
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
function clickform()
{
document.getElementById(‘light’).style.display=’block’;
document.getElementById(‘fade’).style.display=’block’
}
function closeform()
{
document.getElementById(‘light’).style.display=’none’;
document.getElementById(‘fade’).style.display=’none’
}
click here here
Close
i need to show gallery page and another page that will include in the div but who to select one which is opening
Gr8 work, i think you guys are fool, who are fighting for the the topic “Js included” , can any one tell me who can open the popup without using JS.
Yes also there is a problem is that it ovarlaps the black box over only the window screen opened yet, but if we scroll it , it doesnt work for the rest screen.
I got the Solution is that
position:fixed;
_position:absolute;
top:0;
_top:expression(eval(document.body.scrollTop));
Use this in black_overlay , and it will work perfectly for IE too, thanks
[...] http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-need... CSS [...]
Give the guy a break !!! With the “No Javascript” he means, with no tons of it, nor JS library …
Is really a good job dude thanks !!
Though is very usefull, I must say that by itself it isn’t so much. But it leaves you explore the posibilities. I added a few jQuery fancy effects on open and close; and loaded content via an AJAX request using jQuery too, and is a beauty :-D
Thanks again dude !!!
[...] Create a Lightbox effect only with CSS – no javascript needed [...]
who cares whether it is js or not..
as long as its working, it’s fine for me…
very good script.. thanksss… :)
[...] Source: Lightbox effect in pure CSS: No javascript needed! [...]
Thanks, a good little script. Even if the title isn’t entirely true!
this is a very good example. faster, smallcode,
great job………………….thanks:)
Nice Job..
[...] LightBox with CSS http://www.emanueleferonato.com/2007…ascript-needed [...]
A great many people have come on to show exactly how brilliant they are by declaring that the original poster was wrong in his title by stating that the lightbox has no JavaScript. They are either not as brilliant as they think they are or they read an entirely different script that does have JS in the lightbox.
If you are so brilliant, what are you doing hitting Google wich a search anyway?
Quite sensibly, he showed an example of a JavaScript trigger of the documented lightbox, but the lightbox itself has ZERO JS. The lightbox itself is made up of CSS & DIVs.
I say “sensibly” because there are other methods in which you could trigger the lightbox. In fact, they are methods which would work in absolutely any possible browser condition that you could think of… But that doesnt mean you would want to use them.
I love using JS to add some life to my pages – And I love using as LITTLE JS as possible. Therefore I was pleased to find this NO JAVASCRIPT lightbox, but would still use that little JS to trigger it.
I would actually like to thank the poster for going out of his way to share with others, and I feel sorry for him that his payment for doing so was a lot of people crapping on his doorstep and making themselves look like complete idiots.
Emanuele -
This was very easy to implement and also to modify to match my own site’s style. Thank you so much for sharing it, you saved me a ton of time.
Lisa
Hi,
I need to show 1 form in light box which has continue/next button , tat leads to next form in the light box.. like wise need to show 4 forms /div in light box
[...] Creating Lightbox with CSS [...]
This is only useful if you have a website that doesnt have a scroll bar. if so it is pointless.
I like very much.its also work but how to implement for number of image.plz reply me.
I have tried this with IE6 and IE7 and it doesn’t work.
is this really made without javascript? wow! great tutorial.
Easy to follow, and works perfectly with Firefox! Yes, there are like 2 lines of Javascript in the code, BUT they are very easy to use (just copy paste!). This is coming from someone who has never ever used Javascript at all until now for this effect.
I then simply used CSS to style the lightbox the way I wanted.
Thank you for your time and effort, Emmanuele! Am definitely using it for my exam presentation!
I tested also for flash games and it works great!!!
See a demo: http://www.spellen-spelen.nl/lightbox-with-css-only.html
thanks. Awesome especially when you think that a lot of guys deactivate js in their browsers.
Very nice tut man i just used it
Does anyone knows how to avoid the select options to show over the divs?
Great work! Thanks!
i want to know if i can have a picture load instead of just text
@jonathan
Come on boy, just read a little bit, everything is explained well…
Interesting post Emanuele, grazie molto,
therealanodyne
This is awesome i want to use it but where does the pictures go? can you tell me
I’d like to use this cute little thing. If js or not, I don’t care.
But how to make this baby work with an iframe? I have a link inside an iframe, which should show additional info on some point there.
The iframe contains an input form for a payment gateway, shown inside a shops paymentsite. The lightbox should appear if clicked on an info button on the form. There is then a combination of text and pictures shown.
It seems to work only inside the iframe, the outside isn’t covered with the black overlay.
Also it seems, that there are problems with IEx.The layer seems to be behind all the form objects. Any help appreciated.
Thanks for the tutorial
I’m definetely gonna try it
[...] Readmore [...]
how to insert the flash file into to css fully.
chinathambi
Awsome man really simple sleak and fit right into what i needed for my project you da man!
Hahaha. No JS. Classic.
Reiner,
Use the following (I added “parent.” to the beginning of each of the lines) to enable this on an iFrame:
parent.document.getElementById(‘light’).style.display=’block’;
parent.document.getElementById(‘fade’).style.display=’block’
AWWWSOME!!! I’m so glad I found this! Thank you!