jQuery Lightbox

22 June 2006 | Tutorials | 38 Comments

From the creator of "15 Days of jQuery" (me):

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(){
Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.

Subscribe

Email Updates:
Email:
RSS Feed:

RSS information | Email Policy | RSS to Email by Aweber

38 Comments

  1. Nilesh said on 25 Jun 2006 at 3:08 am:

    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.

  2. css menus said on 25 Oct 2006 at 4:16 pm:

    how would I close thickbox from isdie an iFrame?

  3. Jack said on 25 Oct 2006 at 9:13 pm:

    I think I’d have to see an example of your iframe and how you’re implementing it to give you anything definitive.

  4. arnaud said on 30 Nov 2006 at 7:11 am:

    how do I make thickbox open a file in an iframe’s parent window?

  5. Jack said on 30 Nov 2006 at 11:53 am:

    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"

  6. Jeffrey said on 5 Dec 2006 at 9:44 pm:

    arnaud:

    add this script to a link inside the iframe

    self.parent.TB_remove();return false;

  7. warren said on 6 Dec 2006 at 8:01 pm:

    if you are looking for a way to create a normal iframe with jquery, check out…

    Unobtrusive iFrame with JQuery

  8. Sam said on 4 Apr 2007 at 4:34 am:

    @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?

  9. Corey said on 4 Apr 2007 at 5:35 pm:

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

  10. jonah_L said on 21 Apr 2007 at 2:11 pm:

    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

  11. Jack said on 23 Apr 2007 at 12:59 pm:

    Jonah,
    Couldn’t follow what you were asking. Sorry.

    Perhaps an example?

  12. Nilesh Pawar said on 21 May 2007 at 4:48 am:

    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.

  13. Bill said on 14 Jun 2007 at 9:35 am:

    Jonah_L,

    I assume you want target=”_top” or something like that. =)

  14. sidnei dasilva said on 15 Jul 2007 at 11:14 pm:

    Hello,

    Thanks so much for sharing this :D
    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

  15. Mattia said on 5 Aug 2007 at 4:18 am:

    @Jeffrey: Many thanks. Can I close the ThickBox from an Iframe open instead of thickbox? I would close the thickbox automatically after 3 seconds.

  16. Matt said on 7 Aug 2007 at 2:21 pm:

    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!

  17. Emanuel Costa said on 14 Aug 2007 at 10:50 pm:

    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!

  18. Jack said on 15 Aug 2007 at 3:13 pm:

    Emanuel,
    Have your tried Matt’s suggestion?
    Jack

  19. John.Brazil said on 29 Aug 2007 at 1:03 am:

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

  20. John.Brazil said on 29 Aug 2007 at 1:05 am:

    this quotes above was supposed to be the script open and closing tags…

  21. John.Brazil said on 29 Aug 2007 at 10:23 pm:

    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!

  22. John.Brazil said on 29 Aug 2007 at 10:26 pm:

    hahaha again!
    now with ‘-’ so it wont change to html code..
    the code is:

  23. John.Brazil said on 29 Aug 2007 at 10:28 pm:

    AHHHHHHHH damn site!!!

    -

    take out the “-” and you’ll see the code

  24. John.Brazil said on 29 Aug 2007 at 10:30 pm:

    inside the “a” tag, o the “href” part, put “javascript:parent.tb_show(’your_title’,'D:\image.jpg’,”)”

  25. John.Brazil said on 29 Aug 2007 at 10:30 pm:

    finally!

  26. Raul said on 23 Sep 2007 at 4:41 am:

    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!

  27. Kym said on 1 Oct 2007 at 11:21 pm:

    Hi Raul

    Did you get this to work?

  28. Kym said on 2 Oct 2007 at 8:31 am:

    Hi All
    Would anyone please be able to post a sample that works of the

  29. Kym said on 2 Oct 2007 at 8:37 am:

    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

  30. AndyT said on 7 Oct 2007 at 10:42 pm:

    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?

  31. Bruno said on 9 Dec 2007 at 2:51 pm:

    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

  32. Daniel Speth said on 11 Dec 2007 at 11:29 am:

    >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

  33. Paul said on 15 Jan 2008 at 11:21 am:

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

  34. andrei said on 3 Feb 2008 at 8:48 pm:

    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.

  35. dave said on 1 Mar 2008 at 2:18 pm:

    andrei

    does that field have an id or some other way of identifying it through selectors?

    try $(’#fieldId’).focus();

  36. Acronyms said on 12 Mar 2008 at 3:33 am:

    Hey Andrei,

    use this

    http://www.gerd-riesselmann.net/development/focus-first-form-field-with-jquery

  37. Snowman53 said on 18 Apr 2008 at 9:53 pm:

    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!

  38. Kyrre Nygård said on 8 May 2008 at 6:46 am:

    I think jqModal (http://dev.iceburg.net/jquery/jqModal) is a simpler and more elegant alternative to TB.

Leave a Reply

You can follow the discussion through the Comments feed. You can also pingback or trackback from your own site.