jQuery Lightbox
22 June 2006 | Tutorials | 38 Comments
Cody Lindley’s first rendition of “Thickbox” was what got me interested in jQuery. He’s since done an update on Thickbox to fix some cross browser compatibility issues.
A few things to notice
$(document).ready kicks off the TB_init() function, which in turn attaches an onClick event to all links with the class name of “thickbox”.
function TB_init(){
$("a.thickbox").click(function(){
var t = this.title || this.innerHTML || this.href;
TB_show(t,this.href);
this.blur();
return false;
});
When a “thickbox” link is clicked, the TB_show() function fires.
$("body")
.append("<div id='TB_overlay'></div><div id='TB_window'></div>");
$("#TB_overlay").click(TB_remove);
$(window).resize(TB_position);
$(window).scroll(TB_position);
$("#TB_overlay").show();
$("body").append("<div id='TB_load'><div id='TB_loadContent'><img
src='images/circle_animation.gif' /></div></div>");
As you can see above, there are two divs that are appended to the document body. In other words, the two divs are added to the end of the html just before the closing body tag.
The overlay div is styled by css to have an opaque appearance. The TB_window is where the script will place an image or pull in another web page using AHAH.
$(window).resize and $(window).scroll tell jQuery to fire off the TB_position function if the window is resized by the visitor or if the visitor scrolls down the page. This is how Thickbox is able to stay in the middle of the page when you scroll or resize the window.
Next, Cody searches the url passed to the Thickbox code to find the suffix.
var urlString = /.jpg|.jpeg|.png|.gif|.html|.htm|.php|.cfm|.asp|.aspx|.jsp|.jst|.rb|.txt/g;
var urlType = url.match(urlString);
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif'){//code to show images
If it’s an image, then the jQuery append function is used to add the html to the appropriate spot.
$("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img
id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"'
alt='"+caption+"'/></a>"
+ "<div id='TB_caption'>"+caption+"</div><div
id='TB_closeWindow'><a href='#' id='TB_closeWindowButton'>close</a></div>");
$("#TB_closeWindowButton").click(TB_remove);
Otherwise, the remote file is pulled in using the jQuery load() function.
$("#TB_ajaxContent").load(url, function(){
Subscribe
38 Comments
Leave a Reply
You can follow the discussion through the Comments feed. You can also pingback or trackback from your own site.
Would be nice to see a Drag and Drop funciton with that. so users can drag the top header area just like a window. as you may of seen in YUI examples as well.
and also Limit the Drag and Drop the Edge of browser windows too, so they dont get cut off.
how would I close thickbox from isdie an iFrame?
I think I’d have to see an example of your iframe and how you’re implementing it to give you anything definitive.
how do I make thickbox open a file in an iframe’s parent window?
Same way you would without the thickbox. You could Google “link target iframe”.
Basically:
1- Give iframe a name in the opening iframe tag
2- reference that name in the target of the href tag
<a href="http://www.yahoo.com" target="iframeName">
To target the parent window, use target="_parent"
arnaud:
add this script to a link inside the iframe
self.parent.TB_remove();return false;
if you are looking for a way to create a normal iframe with jquery, check out…
Unobtrusive iFrame with JQuery
@Jeffrey: Thanks a lot. Is it also possible to close the thickbox and have the page it is called from (i.e. the “parent”) refreshed?
Sam, you could just modify the TB_close function to reload the page. If you’re talking about ensuring the page actually updates the DOM in IE try adding “return false;” to the TB_close function if it’s not already there (IE quirk).
how to i make the lightbox appear in the main html page when i click on a lightbox link inside the iframe that resides inside the main html page…at the moment, when click the link in the iframe, the lightbox cropped and appear within the iframe frame..not the entire screen…how do i target that correctly..?
thanks
Jonah,
Couldn’t follow what you were asking. Sorry.
Perhaps an example?
Hi,
Its nice to use the lightbox but when I use it inside the iframe and ajax that is data in iframe is displayed through ajax them its not desplaying the lightbox. Can you please have a look and try using lightbox inside the page which is called in iframe and give us the solution.
Jonah_L,
I assume you want target=”_top” or something like that. =)
Hello,
Thanks so much for sharing this
I don’t know if you noticed but the where you have the code (the light gray div) the text expands beyond the border of the same when viewed in Firefox; you can easily fix that by adding style=”overflow: auto;” Just an opinion.
my best,
-Sidnei
@Jeffrey: Many thanks. Can I close the ThickBox from an Iframe open instead of thickbox? I would close the thickbox automatically after 3 seconds.
Hey everyone. Great post first off!
I was wonderin if I could get a bit of this great help that’s been given out.
Having the same issue as other.
Have an Iframe named ‘frame1′
Would like the image links in ‘frame1′ to open in the parent frame. I set the target to parent, however the lightbox still opens in ‘frame1′.
I think i need to add self.parent.TB_remove();return false;
but am not sure where.
Thanks!
I have the same problem that Matt mentioned. I read the thickbox forum and seems this questions is very common and should be a feature in the new releases.
I would be very glad if anyone could point to the right directions.
Thanks!
Emanuel,
Have your tried Matt’s suggestion?
Jack
Jack, Emanuel,
I tried Matt’s solution… added
”
self.parent.TB_remove();return false;
”
inside the body tag of my iframe page. It didn’t worked too, what happens is that it opens the pic but without the “thickbox” effects…
i really don’t know what to do..
ANYONE??????? HEEEELP!!!!
this quotes above was supposed to be the script open and closing tags…
hey guys, i found a solution!!!
what u gotta do is the following:
- first, u need to add the scripts link inside the head tag of your PARENT frame.
- then, instead of just adding the class=”thickbox” in your link, u’ll directly call the function that shows the thickbox from your script that is declared inside your PARENT page, like this:
worked with me! good luck everyone!
hahaha again!
now with ‘-’ so it wont change to html code..
the code is:
AHHHHHHHH damn site!!!
-
take out the “-” and you’ll see the code
inside the “a” tag, o the “href” part, put “javascript:parent.tb_show(’your_title’,'D:\image.jpg’,”)”
finally!
It still doesn’t work for me, But I guess it must be be some problem with the quotes, I was wondering, can you guys write the link to a working example? It would be greatly appreciated. Thanks!
Hi Raul
Did you get this to work?
Hi All
Would anyone please be able to post a sample that works of the
Hi All
Sorry for the previous posting. I was hoping that someone who has managed to make a thickbox open from a link within an iframe and cover the parent page could post the complete a href. I have tried all suggestions from all forums and none work for me. Help PLEASE!!
Thanks
I built a thickbox login system using jquery, thickbox, and the jforms plugin. I’m down to one last goal: when I call parent.tb_remove() to close the thickbox I need to refresh a couple lines of php code inside of a div tag on the parent’s page. Can anyone point me towards a function that will refresh my div?
Kym, it worked for me.
A thickbox within an iframe covered the parent page width the solution given by John.Brazil. Problem is that the related gallery didn’t work, so I had to use a HTML instead of some IMAGE.
Sample is here: http://www.anexo14.com.br/forma/portfolio.htm
>css menus said on 25 Oct 2006 at 4:16 pm:
>how would I close thickbox from isdie an iFrame?
Hi there,
if you want to close a thickbox within an iframe try this as a function and remember to include the jQuery functionalities in your iframe-code (e.g. jquery-1.2.1.js in header).
function tb_removeIframe() {
parent.$(’#TB_window,#TB_overlay,#TB_HideSelect’).trigger(”unload”).unbind().remove();
}
close Thickbox-iframe
Greets and good luck with all that thickbox adaptions;-)
Daniel Speth
I have posted a solution at the Thickbox forums which worked for me in all aspects.
http://codylindley.com/thickboxforum/comments.php?DiscussionID=58&page=1#Comment_3404
The basic idea behind it all is that Thickbox must initiate all functions in the parent window straight away. However these functions will all refer to the iframe content. Explained how it could be done (I suppose the Lightbox principle should be the same).
Hi there,
I have a form login that is loaded (ajax) via Thickbox. How can i make it auto focus on the user field when it is loaded ?
Thanks.
andrei
does that field have an id or some other way of identifying it through selectors?
try $(’#fieldId’).focus();
Hey Andrei,
use this
http://www.gerd-riesselmann.net/development/focus-first-form-field-with-jquery
This topic has been posted on the Thickbox forum, but no workable solution has been offered, or at least I couldn’t recognize one if it was.
Hopefully someone can walk me through a solution!
Here is an example of a TB call I am making (using: jquery-1.2.3, TB 3.1, IE7);
Edit
TB opens with the default size and located near the top of the page instead of using my sizes and centering on the screen when the page is scrolled down.
If I use the same code without passing a variable to the destination URL, TB works as expected (fantastically).
So clearly passing the URL variable messes up passing variables to TB. Could someone walk me through how to change this so it works correctly?
Note that the URL variable is generated by the ASP code and is not easily modified, so I need a Thickbox oriented solution (if possible).
Thanks!
I think jqModal (http://dev.iceburg.net/jquery/jqModal) is a simpler and more elegant alternative to TB.