Hacking jQuery Thickbox..!
Have you ever wished of doing something more with what you have been doing with jQuery thickbox? Now it has been more then 6 months that I am using jQuery on different projects. I have extended jQuery many a times during this period and to tell you one thing I have used jQuery for heavy-weight form processing for one of my very complicated project and it included processing of more then 1600 html controls with the help of great jQuery.
Now when it comes to Thickbox it gives nice functionality but many a times it leaves us hungry for more. For example here are the few situations where it will be difficult to use Thickbox without further modification.
- It let's open window in a IFRAME and close that but what if you can't give 'class="Thickbox"' to any of your link?
- What if you are not loading those links with page load? (If the links from which you are willing to open Thickbox windows is not available at the time of page load then Thickbox won't work. As Thickbox internally works in a way that it will search for all links with class = "Thickbox" at the time of page load and then customize their onclick events.)
- What if you want to open second Thickbox window as someone close first one and that too without any user interaction?
- What if you want to call any javascript function from the parent window? (parent window is the window from which parent window is getting opened.)
jQuery Thickbox is a great solution for many of our requirement but we don't have any option but to modify actual code to use them with complicated and advance situations which we come across.
I have done some modification in Thickbox.js to achive all above 4 points using Thickbox by adding 2 more functions into this great utility and modifying tb_remove function.
Here are 2 functions I have added, you can understand what they do once you read comments.
// To close one thickbox and then open another, this is quite handy // when you want to open another response modal window on the action of current modal window. // Opening more then one thickbox window is not possible on the same page, // so closing one and opening another could be quite handy and we can change height // and width as well for another window. var jThickboxNewLink; function tb_remove_open(reloadLink){ jThickboxReloadLink = reloadLink; tb_remove(); setTimeout("jThickboxNewLink();",500); return false; } // This function will let you open new thickbox window without specifying // class="Thickbox" and any href="http://web.com" attribute // It will be helpful when you are dynamically loading any content and // from those content you would like to open Thickbox windows. // As basically the nature of thickbox is such that it scans all links (..) tags // on load using jQuery's $(document).ready function so if your link is loaded using ajex // or using any dynamic javascript and was not on page at the time of load then this thickbox // setup won't work and you have to use this function. function tb_open_new(jThickboxNewLink){ tb_show(null,jThickboxNewLink,null); }
And here is the tb_remove function with minor modification which will let us call any function of the parent window passed as an argument.
// Modified to provide parent window's function callback function tb_remove(parent_func_callback) { $("#TB_imageOff").unbind("click"); $("#TB_closeWindowButton").unbind("click"); $("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();}); $("#TB_load").remove(); if (typeof document.body.style.maxHeight == "undefined") {//if IE 6 $("body","html").css({height: "auto", width: "auto"}); $("html").css("overflow",""); } if(parent_func_callback != undefined) eval("window."+parent_func_callback); document.onkeydown = ""; document.onkeyup = ""; return false; }
Click here to see these modifications live in action or download zip with examples and modified javascript file.
Let me know if there are any other mods you have done with jQuery thickbox..! or if this post has helped you achieve what you wanted to do with jQuery Thickbox.
16 Responses to “Hacking jQuery Thickbox..!”
You can leave a response, or trackback from your own site.
ali
Said this on April 29th, 2008 at 3:07pm:wow thats greate
i am using thick box in two or three of my applications and faced few of these 4 problems and solved them hardly by providing other alternatives of doing them
but having your modified thickbox will make my applications work better
thanks a lot
Daily Find #62 | TechToolBlog
Said this on April 29th, 2008 at 5:18pm:[...] Hacking jQuery ThickBox - A couple of nice add functions for Thickbox [...]
joe
Said this on May 20th, 2008 at 4:05am:i was having trouble closing a thickbox ajax popup window. apparently there are some compatibility issues with the new version of jQuery. i went to the thickbox support forums and could not find an answer that worked. i found your blog with a simple Google search. i added your tb_remove function with an onclick control and the window closed perfectly. thanks for this. i emailed cody, hopefully he will update thickbox with some of your modifications.
ibme_uk
Said this on May 25th, 2008 at 5:41am:Top man, used …
function tb_open_new(jThickboxNewLink){
tb_show(null,jThickboxNewLink,null);
}
Saved me a great deal of time and hassle, I was having problems using thickbox where the url’s were generated using ajax.. not a problem now..
Thanks.
john
Said this on May 29th, 2008 at 4:34am:Thanks for your tb_open_new function! I had been trying to find a way to do this. Is there any way to set the ‘title’ using that method?
banktip
Said this on June 5th, 2008 at 11:34am:This is how you will close the thickbox and make refresh parent ?
// Modified to provide parent window’s function callback
function tb_remove(parent_func_callback) {
$(”#TB_imageOff”).unbind(”click”);
$(”#TB_closeWindowButton”).unbind(”click”);
$(”#TB_window”).fadeOut(”fast”,function(){$(’#TB_window,#TB_overlay,#TB_HideSelect’).trigger(”unload”).unbind().remove();});
$(”#TB_load”).remove();
if (typeof document.body.style.maxHeight == “undefined”) {//if IE 6
$(”body”,”html”).css({height: “auto”, width: “auto”});
$(”html”).css(”overflow”,”");
}
if(parent_func_callback != undefined)
eval(”window.”+parent_func_callback);
document.onkeydown = “”;
document.onkeyup = “”;
return false;
}
<a href =”" onclick=”self.parent.tb_remove(”parent_refresh_window”);”>Accept
actually that let me in the thickbox windows, and call a totally different page.
got a hint ?
Bill
Said this on June 14th, 2008 at 3:25pm:Can someone provide information on how to used the close and open new? The examples are no longer working.
Dharmavirsinh Jhala
Said this on June 19th, 2008 at 11:22pm:Hi Bill,
jQuery thickbox examples are working now..!
please check it out at http://www.digitss.com/jquery/thickbox/thickbox_hacked.html
ΠΠ°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌ Thickbox - <Ρ> YoYurec Field </Ρ>
Said this on June 27th, 2008 at 3:03pm:[...] ΡΠΎΡΡΠΌ Π½Π°ΡΡΠ»-ΡΠ°ΠΊΠΈ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΡΠΎΠ²Π΅Ρ. ΠΠ°ΠΆΠ΅ ΡΠ΅Π»ΡΡ ΡΡΠ°ΡΡΡ ΠΎ ΠΌΠΎΠ΄ΠΈΡΠΈΠΊΠ°ΡΠΈΡΡ thickbox’Π°, Π² ΠΊΠΎΡΠΎΡΠΎΠΉ ΠΎΠΏΠΈΡΠ°Π½Ρ ΠΎΡΠΊΡΡΡΠΈΠ΅ Π²ΡΠΎΡΠΈΡΠ½ΡΡ ΠΎΠΊΠΎΠ½, Π²ΡΠ·ΠΎΠ² ΠΎΠΊΠ½Π° [...]
David Phipps
Said this on July 3rd, 2008 at 3:16am:Hi,
I have used your modified version of thickbox and have found a possible bug and solution. In your modified tb_remove function the following line throws an error (missing ] in window object) in a non-modal thickbox when the ‘close’ link is clicked.
Here is the offending line of code:
eval(”window.”+parent_func_callback);
I have changed this to:
window[parent_func_callback]
and this seems to solve the problem.
Some great additions to thickbox by the way!!
Cheers,
Dave
Dharmavirsinh Jhala
Said this on July 5th, 2008 at 12:08am:Hi David,
Thanks for your solution, actually I have used thickbox as modal window always in my application so never tried with non-modal version of it.
Thanks again.
Dharmavir
Andrew Robins
Said this on July 16th, 2008 at 9:23pm:How can i load a thickbox when the page loads? without using the onload function either?
I have tried:
tb_open_new(’TB_inline?height=300&width=400&inlineId=hiddenModalContent’)
But it doesnt work. Anyone have any idea?
Andrew Robins
Said this on July 16th, 2008 at 9:39pm:Now i am using this:
tb_open_new(#TB_inline?height=300&width=400&inlineId=hiddenModalContent’);
but when i access the page i get the error:
Internet Explorer cannot open the Internet site
http://10.0.0.1/index.php?.
Operation aborted
Does anyone have any ideas why this isnt working?
Blacknight
Said this on August 15th, 2008 at 7:18am:I was also wondering if you can change not only the width&height of a thickbox inside a iFrame, also changing the title for it.
It’s too nasty remain the title “See the Image” even in a Contact Box…
Blacknight
Said this on August 16th, 2008 at 1:52am:Comm’on, somebody as to know!
ben
Said this on August 18th, 2008 at 9:06pm:I try to do 2 tweaks on a thickbox windows with HTML content, unfortunately I don’t find the way, I have already make a post on thickbox forum without success.
It’s really frustrating because this 2 tweaks are probably not complex to do.
Here what I want :
I want to display an HTML page using thickbox window but with a height of 1050 px or more (with no scrolling)
Actually the size seems to be locked at maximum to 450px in height.
How I can change the maxium height value ?
I want to use Thickbox to open an HTML page with some jpg images on it.
But I want to remove the preloading of the page (not only the animated gif but all the pre loading process) because in this case, when you clic on the thickbox link, instead to wait and see nothing, just the animated gif during the preloading, the page will load traditionally and you will see immediately the progressive jpg appear…
How I can remove the preloading function ?
If someone have a solution or an idea, please let me know.
Thanks to you,