An easy way to create lightbox with jQuery & CSS

As you already know that I’ve been working on improving the performance of my website and I needed a simple solution to create light-box effect for Live-Chat on this website. I had many options to choose from available jQuery plug-ins however, the idea was to optimize the code with minimal use of heavy third-party scripts and CSS. Moreover, Only thing I needed was a light-box effect without any other functionality.

So I created the light-box effect with a few lines of code using CSS and jQuery.

View Demo

Let’s start coding :)

xHTML Code

Place this code within <body></body> tags where ever you like.

First line of the above code is a link with id “show-panel” which will display the “light-box” and the “lightbox-panel” DIVs, similarly on line 7 we have a link with ID “close-panel” to hide these DIVs. This will be handled by jQuery of course.

#lightbox-panel will hold the content to be dispalyed and #lightbox will add a transparent background behind our content panel. Let’s write some CSS code to stylize these two DIVs before we add the functionality to our links with jQuery.

CSS Code

You can add this code within the document’s <head></head> tag or in any linked style sheet.

Note: The z-index value for #lightbox-panel should be greater than z-index value of #lightbox to display it above the transparent background and both should have the property display as none so they should not show up by default or if the users have Javascript disabled in their browsers.

Let’s put some life to our code with jQuery.

jQuery Code

You can add this code within the document’s <head></head> tag and we are done.

Pretty simple, huh!!

Could it get easier than this?

Once you click the link with ID “show-panel” it will display both the DIVs with some nice fade effect and if you click the link with ID “close-panel” it will hide these DIVs.

I hope you enjoyed this little trick to create simple light-box effect with CSS and jQuery and You are most welcome to share your inputs and code in the comments below.

206 thoughts on “An easy way to create lightbox with jQuery & CSS”

  1. Pretty easy and cool, but can we include any pages that embed flash in the content of the light box panel?!

    1. CSSJockey says:

      Sure, You can add flash, iframe or any other valid xHTML code or script in this DIV. For example on this website, Live Chat Panel (DIV) contains Javascript which calls the Digsby flash widget.

      1. Can we add more than one light box in our page. Like one displaying the chat and other to display contact us if we are offline.

        1. CSSJockey says:

          Yes you can add more than one with this technique, you need to modify/add new DIVs and jQuery for the same.

        2. Vy Doan Khoa says:

          Hi all,

          I have a issue on IE,i don’t see the content of page when box is displayed but FF and Opera work fine

  2. Oh thats great, thanks for the tutorial

  3. surfy says:

    Hello. you can open the window when the page loads rather than clicking?

    Sorry for my bad english!!

  4. Ahmed says:

    Very nice tut man i just used it

  5. Cody says:

    That is awesome, you barley written any code with any of the languages. This is easily the smallest coding script to get a lightbox.

  6. g3nn says:

    Hi there,

    Wonder if you can put up a script to display another page (like iframe) but via ajax?

    Thanks.

    1. CSSJockey says:

      Yes, You can load content from another pages. This tutorial might help.

  7. sameera says:

    great work!!!, bt i can with problem, when i run this on Internet Explore 6 it is not working, can u fix this, thanks…..

  8. Hi it doesn’t seem to work for me. When I clicked the link, nothing happens. I have added all the codes exactly you have given, but no changes.

    1. Mohit Aneja says:

      Please share the link so I can check the code and help you debug the code.

  9. Sohail Ahmed says:

    How can I close the box when I click on the empty space of the webpage?

  10. Kevin Tan says:

    Perfect! I like the effect where it darkens everything in the background.

    By the way would you mind implementing this as a WordPress plug-in? It’d be a lot easier for those who doesn’t wanna touch a single coding.

    Thanks.

  11. sam says:

    Great work!!! thank you!!
    I have creat a php form to sign up to a newsletter, but I dont kno how I can make test validation on required fields??

    thanks

    Sorry for my bad english

    1. Mohit Aneja says:

      I’ll be writing a post on form validation very soon, stay tuned..

  12. saurabh shah says:

    Hey buddy ! It looks cool ! and very handy too … keep it up …

  13. digitalclubb says:

    Hey,

    Great little script. What happens with the “lightbox” div if the page height is greater than the clientHeight.

    It would mean you could effectively scroll down and pass the faded lightbox div.

    Does anyone know a fix for this? I have tried to change the containers height to match the clientHeight when the lightbox is activated but this doesn’t work great in IE browers :(

    1. Paul says:

      I changed the “lightbox” div css position from “absolute” to “fixed” and the height problem went away in Firefox, haven’t tested in other browsers yet.

  14. firas says:

    please i wanna ask about PATH_TO/jquery.min.js javascript file . how can i downloaded to test the lightwidow in my system

    1. CSSJockey says:

      You can download jQuery from http://jquery.com and save it in the directory where other files website or demo files are located. Check out this link for more information about adding JavaScript to a page.

    2. kushal kant says:

      mice Thanks, I am glad you like it.

  15. Caldera Mike says:

    Brilliant! Just what I was looking for :) Now, how do you get the lightbox to appear in the middle of the page? I have a link off the bottom of a page and when clicked it takes you back to the top before showing the lightbox, i need the page to stay still! Mike.

    1. CSSJockey says:

      You can update the CSS of lightbox DIV and set its position to fixed. Also you might need to remove the “#” from href property or set return false on click function.

  16. abhishek says:

    Hey hi….ur script doesn’t work in IE6…do u hv ny fix for it??

    1. CSSJockey says:

      Will check once I get some time to work on the hacks, however you can try your hands on based on these resource in the mean time.

    2. digitalclubb says:

      Don’t support IE6 :p

      1. Harry says:

        it does not support IE6, IE7………………

  17. Great jQuery sample, javascript is so much better after this was introduced.

  18. david says:

    Hi! I used your excellent script in a custom CMS for a friend’s website. Thanks for sharing :)

    1. CSSJockey says:

      Thanks David, I am glad to know it was useful for you.

  19. Riz says:

    Nice Work Buddy !

    1. CSSJockey says:

      Thanks, I am glad you like it.

  20. thanks,, very good tutorial

  21. It is great tutorial. It works fine in firefox but does not work in internet explorer. Is there is any solution for other browser.

    1. CSSJockey says:

      You can use CSS Hacks to make it work on IE..

      1. Harry says:

        What is css hacks?

  22. Gunasegar says:

    Thanks buddy……….. its help me lot…

  23. Saamiul Bashar says:

    Is there a way to start the lightbox when the page loads, instead of when a button is clicked?

    1. CSSJockey says:

      Yes, you can add the following code to enable it on page load.

      $(window).load(function(){
      // Enter Your Code Here..
      })

      I hope this helps..

      1. Saamiul Bashar says:

        Thanks! This helped me alot.

  24. pimapen says:

    Well that was much simpler than I was expecting. Thanks!

  25. robbie.D says:

    here is the code fix for ie if anyone is interested…

    Light Box

    * /Lightbox background */
    #lightbox {
    display:none;
    background:#000000;
    opacity:0.9;
    filter:alpha(opacity=90);
    position:absolute;
    top:0px;
    left:0px;
    min-width:100%;
    min-height:100%;
    z-index:1000;
    }
    /* Lightbox panel with some content */
    #lightbox-panel {
    display:none;
    position:fixed;
    top:100px;
    left:50%;
    margin-left:-200px;
    width:400px;
    background:#FFFFFF;
    padding:10px 15px 10px 15px;
    border:2px solid #CCCCCC;
    z-index:1001;
    }

    $(document).ready(function(){
    $(“a#show-panel”).click(function(){
    $(“#lightbox, #lightbox-panel”).fadeIn(300);
    $(window).animate({
    opacity:0,350:function(){

    }});

    })
    $(“a#close-panel”).click(function(){
    $(“#lightbox, #lightbox-panel”).fadeOut(300);
    })
    })

    Show Panel

    Lightbox Panel
    You can add any valid content here.

    Close this window

    hello my name is robbie denton and i am an athlete

    1. Jesse says:

      Change the comments line * /Lightbox background */ to /* Lightbox background */ other wise these codes won’t work.

      1. vasu says:

        confusion cleared. thanks

  26. Kuldeep says:

    can I use iframe in this?

    1. CSSJockey says:

      Yes you can use any kind of content in that DIV tag ;)

  27. mikeatcmd says:

    Nice and simple lightbox. But is there also a way to do this with more than one text or image (like simple gallery).

    Thanks.

  28. czenn says:

    hi this code doesn’t work on ie. how to fix it.

  29. Sumon says:

    This light box does not got 100% height. If your landing page is long and if you scroll it the black does not cover the whole area of window.
    Any idea how to solve it?

    1. CSSJockey says:

      You can use position:fixed and it will work..

  30. max says:

    Kewl!,now this is wat i call efficient usage of programming skill.I have used several lightbox for magento and so on.But this one is straight to the point..

  31. Webdesigner says:

    very nice light box effect tutorial for website designers.
    thanks for it.

  32. minyatoor says:

    Very nice Tutorial, Thanx.

  33. Arturro says:

    I also had a IE8 issue, but this fixed my problem:

    $(“a#show-panel).click(function(){
    $(“#lightbox, #lightbox-panel”).animate({“height”: “toggle”}, 0)
    })
    $(“a#close-panel”).click(function(){
    $(“#lightbox, #lightbox-panel”).animate({“height”: “toggle”}, 0)
    })

    What was my issue: On ie8 when clicked the show-panel, I havent seen contents of the site. Just #000 and the box, differently then under FF etc.

    Remember to set #lightbox not position:absolute; but position:fixed

    it seemes (or maybe it is just a coincidence) that IE8 dont handle with fadeing to background #000 and applying the opacity filters.

  34. Arturro says:

    Other way I founded if You really need the fade effect for IE8 is:

    $(document).ready(function(){
    $(“a#show-panel”).click(function(){
    $(“#lightbox”).css(“filter”, “alpha(opacity=90)”); /* <==== this line!! */
    $("#lightbox, #lightbox-panel").fadeIn(300);
    $(window).animate({
    opacity:0,350:function(){

    }});

    })
    $("a#close-panel").click(function(){
    $("#lightbox, #lightbox-panel").fadeOut(300);
    })
    })

    then it works and you also dont need this:
    filter:alpha(opacity=90);
    in your css anymore.

  35. David says:

    Hi, i’m having a problem with the lightbox, on the top part of my page i have an embedded youtube video.

    The lightbox would be used to display “your mail has been sent, thx” .

    But when the lightbox pops up, the youtube video is ontop of the lightbox, its not faded.

    – ive tried forcing the Z-index of the utube div to 10, no use
    – same with any browser

    1. CSSJockey says:

      Yes, its a known issue and can be resolved by adding the following line within Object tag.
      <param name="wmode" value="transparent" />

      1. David says:

        Thanks, i didnt expect a reply as i’m not a regular visitor of your site, usually it takes 3months to get a reply on some sites :D

        I found that value “opaque” also works instead of “transparent”.

        1. CSSJockey says:

          My reply was actually late, I try my best to reply within 48 hours but due to heavy work load it takes some time. I strongly believe that communication is most important to leave a mark on your website visitors :)

        2. Benjamin says:

          Hi there, First: thanks for your hard work. I’ve been using Lightbox for a short time now, but I think it’s a great piugln and it adds some extra class to my site. Since the most recent update it’s not working anymore though. I updated WordPress to 2.8, then lightbox to 1.5. As gallery-program I’m using laziest gallery. It worked great before the updates and now I don’t get a nice box anymore when viewing photo’s. If you like, you could check it at my site under Foto’s . There are some galleries there. I reset all settings, then checked the right boxes again. I checked the gallery-script, everything is still installed. Could this problem have to do with your most recent update? Sincerely, Michiel

  36. S says:

    Hi, thank you for the tutorial. Please could you give some guidance on how to incorporate this with vimeo video? I have put the embed code into the box, but when I close the box, the music keeps playing.
    I would be grateful for any advice on how to correct this or where to look for information on this subject.
    Thanks

    1. CSSJockey says:

      There are a few light box plug-ins which do the same, however you can use jQuery to remove any content within the panel by setting
      $("panel_selector").html("");

      This will remove any content/video code etc. within the panel.

  37. shanawaz says:

    #

    i did’nt find the code for these javascript could you send it

  38. cailen says:

    great tutorial, thank you. i am having trouble with firefox on Mac, any thoughts? it basically renders the bottom layer i think, but not the main content.

    1. CSSJockey says:

      Verify the z-index and positioning of the main content DIV, it works fine at my end with same config.

      1. cailen says:

        thanks, wow you are fast. i basically used your code verbatim but i’m wondering if some existing styles didn’t effect it somehow. i’ll try making them both fixed and upping the z-index on the content

  39. dave says:

    how do i use this if i just want the lightbox to display some html when the page loads?

    then when you click a link in the html the lightbox fades to the page underneath.

    i’m going nuts trying to figure out how to do this.

    thanks

    1. CSSJockey says:

      Hi Dave, This can be achieved by jQuery. I guess this website should give you an idea of using jQuery http://www.visualjquery.com

  40. How to combine it with SWFaddress ?

    1. CSSJockey says:

      Any content within the panel should show up fine, just include the SWF Object code in the panel and fix the width and height of the panel, this should do the trick.

  41. Randall K. says:

    Looking for a simple lightbox like this… thanks so much! So many plug-ins out there… but the best way to learn is by doing, right?

    Do you have any idea how you might start the box at a fixed size (400px x 100px), and dynamically grow it to fit the size of the text in the div as needed? Is that difficult?

    1. CSSJockey says:

      It really easy, you just need to play with the CSS and jQuery to make it happen.

  42. harisha says:

    not working in in ie6

    1. CSSJockey says:

      May be you need to search and use some hacks for the same. I don’t test my works for IE6 anymore..

  43. Very nice Tutorial, Thanx.

  44. labbysdoghouse says:

    I really loved this it was super helpful but for some reason my lightbox content does not go away when i close the panel, any ideas for why this is doing this? let me know thanks.

    1. CSSJockey says:

      Make sure you use fadeOut() function for the lighbox div as well.

  45. priyanka says:

    wow! u are amazing, thanx so much, plz post some such type of dynamic things to help my type of geeks.

    1. CSSJockey says:

      Thanks Priyanka, I am in the process of re-designing the site to make it more friendly for me and the users and will post a lot of tuts on the site.

      1. Jasmeet Kaur says:

        could you please guide on, how can I call a php file/functions in it?,which calls a db in it.
        please help.

        1. Mohit Aneja says:

          The same way you call PHP code in an HTML document. Its just a DIV stylized with CSS and jQuery.

      2. Gurunath says:

        Yo Nem, i love your stuff! :)BUT.. you should add alpha(opacity=80); on in nlb.js for it to work prpleroy in IE 8, even tho IE sux the majority still use it.. ;[Aaanyways keep on rockin man!Piz!

        1. Mohit Aneja says:

          Thanks, I think IE is one browser which is holding all of us to use the up-coming technologies. I have dropped support for IE previous versions a long ago and if any of my client ask for the same, its done at an extra charge.

  46. priyanka says:

    wow, great

  47. SKyper says:

    Damn nice trick!! great and I wanna test it now

  48. hubert says:

    I have problem with opacity. I have a lightbox opacity set to 0.9 but the image that is positioned:fixed in the middle of lightbox is also transparent. I set that one to 1.0 but it didn’t work. Any ideas? thank you!

    1. Nik says:

      The solution would either be to place the lightbox panel outside of the black area and move it up with positioning, or use rgba(0,0,0,0.9) for the background of the black lightbox and omit opacity.

    2. Kyu says:

      I also had issues with the opacity being inherited from the lightbox. what i did was to set a bg color in the lightbox using rgba for the transparency, thus it doesn’t affect the opacity of the foreground.

      (As usual, this fraks up IE <9 though)

    3. Juho H says:

      Be sure to have your z-index greater on the image than the lightbox. Then it should work just fine.

    4. Tarek says:

      i love the lightbox plus. we do lots of work in WP and feel it is hands down the cuerrnt leader in usability and has so many great plug ins as you already know :)

  49. Rehana says:

    Awesome!! really cool and simple code. Thank you for the post.

  50. Karl S says:

    I’m having trouble putting anything but text in the lightbox. Is there something that would prevent an iFrame or embedded content to show within?

  51. jassi says:

    can i use with ajax option….??
    Thanks for the post.

    1. Mohit Aneja says:

      Yes you can for sure :)

  52. ronkrt says:

    Hey thanks for the tutorial, awesome! helped me produce the splash/coming soon page perfect for my project (website included)

  53. vietvoquoc says:

    Your article is very cool!!

  54. Ryan says:

    Awesome! i love nice and simple ways to do things.

  55. قیمت روز آهن آلات says:

    Your website is great and thank for your Articles.

    1. Mohit Aneja says:

      Thanks, I am glad you like it.. may be the new look will spice it up again.

  56. dima says:

    Exactly what I was looking for!
    Simple and clear.
    Thank you!

    1. Mohit Aneja says:

      I am glad it helped..

  57. Hendry says:

    Great ones!!!!
    Thanks a lot for the share … help me alot.
    :)

  58. Glacia says:

    Why isn’t my lightbox panel transparent to show the words on the web page? ):

    1. Mohit Aneja says:

      Please check the code for any errors or try changing the opacity to 50% and make sure you are trying this on a latest web browser which supports opacity.

  59. Eshita says:

    Hey, Thanks for such nice explanation and a real working demo.. it helped me too.. but i want it do be little different.. i want lightbox to come on click of value help field, which i have added using SAP UI5.. How can i do it? Urgent help is required..

    Thanks in advance.. :)

    1. Mohit Aneja says:

      You can trigger jQuery click function to achieve the same instead of window.load

  60. Jude says:

    Hey,

    Thanks so much for this really useful.

    How can I edit the code to put more than one lightbox on one page? At the moment if I put more than one on they all open up the first lightbox. Thanks for your help!

    Jude

    1. Mohit Aneja says:

      You can create a JS function and populate the content via AJAX. I use this all the time and works fine.

  61. jassi says:

    working just fine….!
    but there is one issue when lightbox appear its not cover all of the page as in black background
    when i scroll down a bit the content is shown. what should i do?

    1. Mohit Aneja says:

      You can try setting the lightbox div position as fixed so it should stay as it is even with scrolling.

      1. satz says:

        could you say how to make it fixed?

        1. Mohit Aneja says:

          Change absolute with fixed in the CSS.

      2. drjay says:

        Or you can hide and unhide the overflow.

        $(“body”).css(“overflow”, “hidden”);

        $(“body”).css(“overflow”, “auto”);

    2. Joshua says:

      In response to your first question about the background. If you are copying and pasting there is an error in the OP’s CSS:

      * /Lightbox background */
      should be
      /* Lightbox background */

      PS thanks for the script!

  62. Abhinit says:

    When we scroll after the lightbox comes up, then the background page scrolls too.
    This can be a problem if the lightbox contains say an image and the height of the image is more than the screen height and we don’t want scrollbars in the lightbox.
    Is it possible to make the background fixed in such a case?

    1. Mohit Aneja says:

      Yes use the fixed property, it will work.

  63. SATHEESH KUMAR .S says:

    Thank you very much, it’s work. It’s a glad time

  64. Jim says:

    It’s beautifully simple and efficient.

  65. Mike says:

    Thanks!
    Simple code is always the best.

  66. Rafael Almeida says:

    a little change for improvement:

    $(“a#show-panel”).click(function(e){
    $(“#lightbox, #lightbox-panel”).fadeIn(300);
    e.preventDefault();
    })
    $(“a#close-panel”).click(function(e){
    $(“#lightbox, #lightbox-panel”).fadeOut(300);
    e.preventDefault();
    })

    this way the page not scroll up.

  67. suchita says:

    thanku so much………..

  68. amit says:

    sir plz give me this script with validation ..

  69. haitham says:

    i hve error with that path SO wat is that path for?
    the action didnt happen there is sumthing error with Jquery i guess
    ..
    thanks

  70. Parth says:

    Good work mate! :)

  71. Ujjaval says:

    How to do it on page load?

    1. Mohit Aneja says:

      Its pretty simple, add the lightbox fade in code under document.ready function.

      1. Leonardo says:

        Personally. I’d rather have minilols of people using the same lightbox than have to deal with tons of pop-up windows or gallery scripts that aren’t nearly as well made. I don’t find lightbox’s UI to be particularly distracting, and it’s become pretty universal, so much so that pretty much everyone has encountered one, making it a really intuitive choice for displaying images.

  72. Thom says:

    Thank you! I just can’t get #lightbox to fade. It works on your site so it isn’t a browser issue.

    1. Mohit Aneja says:

      You can use $("#element").fadeOut(500); to fade any element.

  73. fred says:

    simple and clean.
    Good Work!

    1. Zakithie says:

      I am getting a litlte tired of lightbox too for some of the reasons you mention (lack of people who’ve customized the CSS, primarily), but my main beef with it has to do with speed. One of the reasons that make it so cool are the subtle animation effects. But then, one of the reasons it can feel tiresome is the (sometimes choppy) animation between images. Also, the fact that it seems to be used inappropriately is a litlte much. For instance, if you have 3 pictures, you don’t need a lightbox.@Breck et al. On the other hand, when it is used appropriately as on your site, or, for example, the similar plugin used on design rockstar Joshua Davis’ site, I don’t mind it at all.

  74. drjay says:

    How do you create 2 lightboxes. I mean how does the jQuery Code change?

    1. Mohit Aneja says:

      You can use jQuery Ajax to load different content in the lightbox as per user actions.

      1. Andrew says:

        Hey, I know you’ve heard this a lot cause I’ve scanned all of the comments, but awesome code!!

        As for loading different content into the lightbox using jQuery Ajax. How would you go about doing that? I’m not very skilled with javascript but I know how it works, and Ajax I’ve never touched.

        I’m calling multiple posts from a database, (name, id, image, info, etc). When I do my query to select the data from this table I currently have 3 posts and it displays all 3 how I want it to, but when I use the function to get the lightbox it only works on the first post. I need to have it so when you click on image 1 it brings up the lightbox and calls the corresponding data to that image, and so on for the other images.

        Any help or direction you could give would be GREATLY appreciated, I’ve noticed in your comments you’ve mentioned you’ve done something like this just using ajax in js function.

        Thank you so much!
        -Andrew

        1. Mohit Aneja says:

          Hi Andrew, You can use $(this) for the links instead of $(.classname) to get it work.

      2. Anthony says:

        This was great thank you. Is there anyway you can elaborate on the above comment I am new to jquery and do not understand how to utilize Ajax to load different content.

  75. Chirag Purohit says:

    Wow great tutorial.Thanks for sharing this… :-)

  76. brion says:

    brilliant man!!!!

  77. Hitesh says:

    Awsome..!

  78. Chris says:

    Great tutorial! Thanks for posting. I’m getting a little “buggy” effect when the modal opens. I have the code beneath the fold of my page and when I click the element to show the modal, the pages jumps to the top and opens the modal. I’d like the modal to be in the center of the window (no matter what window size), but its at the top. CSS is controlling the top property, right, but when I close the modal, I have to scroll back down to where I was on the page to where I clicked. Would you tell me why the page jumps to the top when the lightbox opens and how to stop this behavior? Thanks!

    1. Mohit Aneja says:

      Chris, If you are using the same on a link or button, you can use return false; to avoid redirection of inline and external links.

  79. Hui says:

    Great Help. Thank you very much. If I want to display the modal form at the position below the link “Show Panel” say 30px; How to change CSS?

    1. Mohit Aneja says:

      Hi Hul, You would need to play the CSS position attribute. The parent should be relative and other should be absolute. You can use span tag to have the link and panel under one element to achieve the same.

  80. qino says:

    Before, I thank to u for this tutorial. But I have the trouble to show data from mysql in the lightbox. the text (data from mysql) disappear in a view second.

    1. Mohit Aneja says:

      This is because we are hiding the #lightbox element on window load in this example. You can try .click function to show and hide the lightbox if you want the data to stay on the page.

  81. Cody says:

    Great tutorial! Also, I noticed a slight typo in the code. The comment before the #lightbox element isn’t written correctly ( “* /Lightbox background */”). This caused the element not to appear for me when I first tried it.

  82. bhoomi says:

    how to use multiple popup on one page ???

    1. Mohit Aneja says:

      You can trigger the jQuery action on “click” instead of “load” and you can do so with any link, image or any HTML tag.
      Just make sure you use [code type=”html”]return false[/code] when working with links or submit buttons.

  83. shahen says:

    Its buggy dude :) fill the page (while come to scroll) then test it… the layer only taked body alone.. not fully covered in html page

    1. Mohit Aneja says:

      You can change the CSS code and set the position to fixed instead of absolute.

  84. Muhammad Sohail Qureshi says:

    Nice and very simple code, unbelievable solution for lightbox :)

  85. Jhudiel says:

    Having problem in IE9.. When i code it.. it looks different in IE 9 and the opacity does not appear.. even the positions are different.. but in Chrome, Firefox and Safari looks great

    1. Mohit Aneja says:

      For IE, I’d say look for some hacks. I hate IE and don’t even look at the icon unless its a client website that I need to check the compatibility.

  86. azf says:

    It is not working for me…
    I am having trouble knowing where to place the jquery code. I have added it on the header before the css and it doesn´t seem to work, then tried to add it before body tag and nothing occurs still. Is it because I am placing it wrong? Or is it because I should download the file “PATH_TO/jquery.min.js” ?
    Thanks

  87. sohaib says:

    its not working :( what can i do?

  88. surya says:

    it’s very simply thanq…….

  89. Arun says:

    Excellent Job

  90. Marco says:

    This is great. KISS principal which is exactly what i need being PHP illiterate. I have it working with an image in the root of the site. Now i would like to populate this box with multiple images, (all images) all belonging to that 1 post, uploaded by custom metaboxes.
    Now i display them using
    ——————-
    <?php $images = rwmb_meta( 'mh_plupload', 'type=image' );
    foreach ( $images as $image )
    {
    echo "“;
    } ?>
    —————-
    How do i build that into your xHTML code:
    —————-
    Show Panel

    Lightbox Panel
    You can add any valid content here.So obviously something in here

    Close this window


    —————-

    I would appreciate any pointers but keep in mind i am probably the worse PHP coder on the western hemisphere.

    Kind regards, Marco

    1. Mohit Aneja says:

      Hi Marco,

      I would recommend to run your code outside the lightbox panel. May be on a page where you can call all the images.
      Wrap it around HTML tags and style it with CSS. Once you get desired results you can simply put your code in the xHTML code and use the jQuery code to display the lightbox.

      As in your code you I assume $images is the array that return all URLs so you can wrap it in img tag and fix the padding via CSS.

      I hope this will help.

  91. Patti says:

    Great simple lightbox code. Only one problem. You HAVE to click a close button to make it go away. Yet, right here on your page, you have a lightbox where you can click the overlay to make it close. How do you do that?

    1. Mohit Aneja says:

      You can add jQuery “click” code to hide the panel and overlay. for example:
      [code type=”javascript”]
      $(#overlay).click(function(){
      $(“#overlay, #lightbox”).hide();
      return false;
      })
      [/code]

      1. David V says:

        would $(body).click work aswell then ? since everything is inside the body (normally)

  92. arti shrivas says:

    can i use these light box for displaying user registration form and can insert values in mysql database from light box

    1. Mohit Aneja says:

      Yes you can, I recommend to use AJAX with PHP to enhance user experience.

      1. arti shrivas says:

        i m not familiar with ajax i try but my data will not inserted into database

  93. Website Development says:

    Thanks for the code, this code helped me. Its simple and clear.

  94. Kayode Kuti says:

    Very concise and well written. Thanx very much

  95. KD says:

    Hey,
    I am a CSS Jockey fan since beginning :)
    I dont know if your aware but your copy to clipboard isn’t working :/
    I am on a dell laptop with windows 7 64 bit using google chrome Version 23.0.1271.97 m

  96. Jon says:

    Found this via: http://www.webdesignersblog.net/design/95-stunning-jquery-effects-lightbox-tutorials/ ; it would be really cool if someone would incorporate your simple lightbox with the JQuery search in # 71 from the same original link.

  97. priyanka says:

    hey i need a page termination lightbox with circular edges.. can u plz help me?

    1. Mohit Aneja says:

      You can try JS beforeclose trigger for the same.

  98. Neo Anderson says:

    Its not showing black overlay behind the lightbox. Please help to get it. Used the same code.

    1. Mohit Aneja says:

      Try adding some text in the lightbox DIV and see where it is on the page and change the CSS accordingly.

      1. Rich says:

        Hi, great tutorial. But I have the same problem that it not shows the black overlay. When I inserting some text in the lightbox DIV it is shown directly under “show panel”. What am I doing wrong?

        1. Mohit Aneja says:

          Check the z-index property and to trouble shoot remove display: none and see how it look on your page.

  99. Ratul kumar Sen says:

    Excellent Job…. very helpful

  100. Ed says:

    Great simple light box. I can stuff the results of a mySQL query into wherer it says: You can add any valid content here.

  101. al says:

    From where can i get the jquery.min.js file?

    1. Mohit Aneja says:

      You can download jQuery from here:
      http://www.jQuery.com

  102. Aishwarya says:

    thanks for the helpful post.

  103. zineb says:

    thaaaaaaaaaaaaaaaaaaaaaanks verry mutch, it works perfectly

  104. Grateful Anonymous says:

    Thanks for the examples, they were of great help! :)

  105. Lakshminarayanan E says:

    It was great. I want a lightbox without hiding the orignal content. help me

    1. Mohit Aneja says:

      You can remove the code for the background DIV element which is black and you can have any content in the upper DIV.

  106. scott says:

    Hi,

    I created this step by step but whats is the href value it cant work with only dummy “#” right? i dont work for me…thanks.

  107. Manasa says:

    Hi, This lightbox is fine and working good in chrome & mozilla but it’s not working properly in IE7.The lighbox content div displays in the leftside. I need to worki in IE. Please help me.

    1. Manasa says:

      Thanks i just modified the existing css. I got it. It works in IE7 also. Thank you very much

  108. Chris says:

    Lightbox background isn’t working? I want to have a transparent background

    1. Mohit Aneja says:

      Chris, You can use a .png image (10×10 pixel) with desired opacity or you can play with the opacity property for lightbox DIV.

    2. Eduardo says:

      you could also use:
      background-color: rgba(0,0,0,0.5);

  109. Ivan Salgado says:

    I tried to add this after show-panel script
    $(“.lightbox, .lightbox-panel, .lightbox-panel2″).fadeIn(300);

    because I wanted to add a separate light box but obviously that wasn’t the answer. Could you help me out here?

    1. Mohit Aneja says:

      For multiple lightbox, you can create a back overlay panel and use ID #lightbox and other panels with higher z-index.
      Then write code for each panel to display the content with the lightbox effect. You can also specify the panel ID in link attributes e.g. data-id=”panel-id” and create one jQuery function to get the ID and display the panel with the lightbox.

      1. Steven says:

        Hi Mohit,

        I’m having a similar issue. Can you provide an example of this, where you specify the panel ID and have jquery find it before displaying the panel? I’m having a hard time trying to achieve this effect.

        Thanks!

  110. Israel Estrada says:

    Nice page bro!!
    Also, thanks a lot for this!!!

  111. manjit says:

    nice code…

  112. swapna says:

    Hi,,, I want the lightbox to b slidedown from top when I click the button. Kindly code it up and let me know back.

    1. Mohit says:

      Hi, Try Animate.css with jQuery toggleClass method.

Leave a Comment

Your email address will not be published.*

*