Comments on: Create a Lightbox with jQuery and CSS

By: Martin

Martin — Sun, 22 Jan 2012 15:47:11 +0000

Laetitia, had the same problem. I searched on jquery.com and found that: Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol. So, your data have to be on the same server.

By: Laetitia

Laetitia — Wed, 04 Jan 2012 22:19:24 +0000

I am using this script, however, I updated the jquery src to the latest, 1.7.1 (as of today). Whenever I try to load any external content into the lightbox I get the AJAX failure pop-up. Any thoughts? Help would be greatly appreciated…

By: Ramon

Ramon — Tue, 27 Dec 2011 21:39:15 +0000

Hi its working great!, but the problem is i need to put some PHP inside, and then it crash :( how can i solve this.

thanks!

By: Alan

Alan — Mon, 21 Nov 2011 04:43:40 +0000

I was able to get the closeLightbox function to work…but now I’m struggling with another challenge. I want to use the lightbox on the same site for 2 different applications, which are very different sizes. I changed the height and width of the lightbox div to auto, which is working great…but I can’t seem to get it to automatically center on the page. I would like it to appear in the center whether I’m displaying my 480px Login window, or my 720px Sign-Up screen.

Sorry if this is a basic question – I’m pretty new to this!

By: Alan

Alan — Sun, 20 Nov 2011 13:23:46 +0000

After some trial and error I was able to get the lightbox working, but I can’t seem to connect the closeLightbox function to the lightbox-close DIV the way that you did on your portfolio page. Any help would be greatly appreciated!

By: Kyle

Kyle — Fri, 11 Nov 2011 13:43:00 +0000

Kyle, transitioning between photos requires a bit more scripting to make it work. Basically, you have to load the image in JavaScript, and get the size of the image before you can figure out how to animate the size of the lightbox. Check out my portfolio (“My Work”) and “view source” to see how I did it there, if you’re interested.

By: Kyle

Kyle — Fri, 11 Nov 2011 00:46:20 +0000

This is really cool! How could I use it to show photos, and have them transition?

By: yashcoder

yashcoder — Tue, 25 Oct 2011 22:33:05 +0000

Dude thanks! its a very simplified explaination :D

By: Alex

Alex — Tue, 11 Oct 2011 19:14:57 +0000

Thanks for the article, was very helpful and clear.

By: bruno

bruno — Thu, 06 Oct 2011 20:05:43 +0000

another solution would be to add this line right before the “display lightbox” lines (before lines 54-55):

// make shadow same height as document
$(‘#lightbox-shadow’).css(‘height’, $(document).height()+’px’);

This will get the document’s height and adjust the shadow to fill it