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 could have used one of the available jQuery plug-ins out there however, the idea was to optimize the code with minimal use of heavy third-party scripts and CSS.
Oct 24, 2009 CSS, jQuery, Tutorials

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.

<a id="show-panel" href="#">Show Panel</a>
<div id="lightbox-panel">
<h2>Lightbox Panel</h2>
You can add any valid content here.
<p align="center"><a id="close-panel" href="#">Close this window</a></p>

</div>
<!-- /lightbox-panel -->
<div id="lightbox"></div>
<!-- /lightbox -->

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.

* /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;
}

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.

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

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.

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

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

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

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

        • Vy Doan Khoa

          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

  • Oh thats great, thanks for the tutorial

  • surfy

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

    Sorry for my bad english!!

  • Very nice tut man i just used it

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

  • Hi there,

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

    Thanks.

  • sameera

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

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

    • Mohit Aneja

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

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

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

  • sam

    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

    • Mohit Aneja

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

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

  • digitalclubb

    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 🙁

    • Paul

      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.

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

    • You can download jQuery from https://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.

    • kushal kant

      mice Thanks, I am glad you like it.

  • Caldera Mike

    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.

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

  • abhishek

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

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

    • digitalclubb

      Don’t support IE6 :p

      • Harry

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

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

  • david

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

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

  • Riz

    Nice Work Buddy !

  • thanks,, very good tutorial

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

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

      • Harry

        What is css hacks?

  • Gunasegar

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

  • Saamiul Bashar

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

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

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

      I hope this helps..

      • Saamiul Bashar

        Thanks! This helped me alot.

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

  • 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

    • Jesse

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

      • vasu

        confusion cleared. thanks

  • Scott

    Thanks!

  • Kuldeep

    can I use iframe in this?

    • Yes you can use any kind of content in that DIV tag 😉

  • mikeatcmd

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

    Thanks.

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

  • Sumon

    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?

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

  • max

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

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

  • Very nice Tutorial, Thanx.

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

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

  • David

    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

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

      • David

        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 😀

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

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

        • Benjamin

          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

  • S

    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

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

  • shanawaz

    #

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

  • cailen

    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.

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

      • cailen

        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

  • Such useful it is!

  • dave

    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

  • How to combine it with SWFaddress ?

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

  • Randall K.

    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?

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

  • not working in in ie6

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

  • Gud one….

  • Very nice Tutorial, Thanx.

  • labbysdoghouse

    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.

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

  • priyanka

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

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

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

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

      • Gurunath

        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!

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

  • priyanka

    wow, great

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

  • Great !

  • hubert

    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!

    • Nik

      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.

    • Kyu

      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)

    • Juho H

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

    • Tarek

      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 🙂

  • Rehana

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

  • Karl S

    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?

  • jassi

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

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

  • Your article is very cool!!

  • Ryan

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

  • قیمت روز آهن آلات

    Your website is great and thank for your Articles.

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

  • dima

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

  • Hendry

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

  • Glacia

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

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

  • Eshita

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

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

  • Jude

    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

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

  • jassi

    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?

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

      • satz

        could you say how to make it fixed?

      • drjay

        Or you can hide and unhide the overflow.

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

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

    • Joshua

      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!

  • Abhinit

    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?

    • Yes use the fixed property, it will work.

  • SATHEESH KUMAR .S

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

  • Jim

    It’s beautifully simple and efficient.

  • Mike

    Thanks!
    Simple code is always the best.

  • Rafael Almeida

    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.

  • suchita

    thanku so much………..

  • amit

    sir plz give me this script with validation ..

  • haitham

    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

  • Parth

    Good work mate! 🙂

  • Ujjaval

    How to do it on page load?

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

      • Leonardo

        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.

  • Thom

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

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

  • fred

    simple and clean.
    Good Work!

    • Zakithie

      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.

  • drjay

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

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

      • Andrew

        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

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

      • Anthony

        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.

  • Chirag Purohit

    Wow great tutorial.Thanks for sharing this… 🙂

  • brion

    brilliant man!!!!

  • Hitesh

    Awsome..!

  • Chris

    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!

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

  • Hui

    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?

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

  • qino

    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.

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

  • Cody

    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.

  • bhoomi

    how to use multiple popup on one page ???

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

  • shahen

    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

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

  • Muhammad Sohail Qureshi

    Nice and very simple code, unbelievable solution for lightbox 🙂

  • Jhudiel

    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

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

  • azf

    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

  • sohaib

    its not working 🙁 what can i do?

  • Mega

    Thanks 😀

  • surya

    it’s very simply thanq…….

  • Arun

    Excellent Job

  • Marco

    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

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

  • Patti

    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?

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

      • David V

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

  • arti shrivas

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

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

      • arti shrivas

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

  • Website Development

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

  • Kayode Kuti

    Very concise and well written. Thanx very much

  • KD

    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

  • Jon

    Found this via: https://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.

  • priyanka

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

    • You can try JS beforeclose trigger for the same.

  • Neo Anderson

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

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

      • Rich

        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?

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

  • Ratul kumar Sen

    Excellent Job…. very helpful

  • Ed

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

  • al

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

  • Aishwarya

    thanks for the helpful post.

  • zineb

    thaaaaaaaaaaaaaaaaaaaaaanks verry mutch, it works perfectly

  • Grateful Anonymous

    Thanks for the examples, they were of great help! 🙂

  • Lakshminarayanan E

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

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

  • scott

    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.

  • Manasa

    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.

    • Manasa

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

  • Chris

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

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

    • Eduardo

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

  • Ivan Salgado

    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?

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

      • Steven

        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!

  • Israel Estrada

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

  • manjit

    nice code…

  • swapna

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