Hacking jQuery Thickbox..! April 27, 2008
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; }
See Demo 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.
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
[...] Hacking jQuery ThickBox – A couple of nice add functions for Thickbox [...]
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.
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.
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?
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 ?
Can someone provide information on how to used the close and open new? The examples are no longer working.
Hi Bill,
jQuery thickbox examples are working now..!
please check it out at http://www.digitss.com/jquery/thickbox/thickbox_hacked.html
[...] форум нашёл-таки полезный совет. Даже целую статью о модификациях thickbox’а, в которой описаны открытие вторичных окон, вызов окна [...]
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
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
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?
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?
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…
Comm’on, somebody as to know!
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,
I must say this is what i was actually looking for.
I shifted to JQuery just few days back, leaving my then favorite MochiKit.
I admit, it was a nice shift for me.
And Thickbox was a bonus.
But it can leave you pretty much lost when you want to do something runtime, and if you trying to use
Thickbox, as an important step of your control/data flow.
People would know what crap am talking is not that much a crap.
Especially who are new to Thickbox like me.
But these changes made my way easier.
Thanks again for that.
Hi,
When the php page load , i need “thick box popup” without clicking any tags.How to do it. can any one help me out. pls send sample code in php….
thanks
Hi Sandya,
To open thickbox popup while page is loaded you don’t need single line of php code.
Just write down following line of javascript on the page.
just specify your preferred web URL here and replace height and width with your preferred height and width..
Let me know if you need any further help.
Dharmavirshnh Jhala,
I was hoping to use your code to not have to invoke the thickbox class but not for all the links on a site. Is there a way to just do it for specific links?
I am a novice at this stuff so I apologize if the question is too basic.
Thanks ahead of time for your help.
Hi Ryan,
I thick I didn’t got what you are trying to say, but I believe you don’t need to hack thickbox, you can utilize thickbox as it is..
Please visit http://jquery.com/demo/thickbox/
click on Examples section and try various options you can see the demo.html code all the time for any example case to learn how you can implement that.
Actually if you don’t want to have thickbox on all your links then just put \ class=”thickbox” \ on only those links where you want thickbox to appear.
Please don’t hesitate to ask further if I could help you out.
Thanks.
Grate work!
I was searching around for at least 4 hours until I found this article.
Thanx!!
How can I show full size in a very large image?
Is it possible to open a jpg without specifying the class attribute ??
thanks
We can open but then need to refer some ID/Class/Tag which can be triggered on load to find the elements and attach thickbox with them on their Click event…
Hi! I’m new to thickbox and jquery, and I have a problem without solution, so I ask to you a bit of help.
I need to open a thickbox on form submit, send all variables. For example: I have a search form that send parameters to a result page, and I need to open the result page in iframe with thickbox.
I try the solution on the thickbox forum without success.
Please, can you help me? Thank you very much!!!!!!
Hello. Blacknight, try this:
function tb_open_new(title,jThickboxNewLink){
tb_show(title,jThickboxNewLink,null);
}
So, when you call the function, pass the title as the 1st parameter: self.parent.tb_open_new(’Your title…’,'window_one.html?TB_iframe=true….’
To submit forms, I’ve used this:
/* load the Form plugin */
/* function to submit form*/
$(function(){
$(’#form_name’).submit(function() {
data = this.formSerialize();
self.parent.tb_open_new(’Window Title’,'process_form.php?&’+data+’TB_iframe=true&height=235&width=500′)
return false;
});
});
i hv problem with thick box even i used these updated files, i m trying to call popup window n from that window im selecting particular value, n i hv to return on parent page with upadating some portion but problem is when i click on that popup windows link which i was using for further changes in parent page then only parent page displayed as it is without any change. please suggest me……!
Thanks for your hack but it gives me one javascript error on mozilla error console.
Error: missing ] after element list
Source Code:
window.[object Object]
i.e for this line in the code(thick box js file)
eval(”window.”+parent_func_callback);
Интересно стало, а есть кто-то, кто не согласен с автором ?
Hello,
As I tried to using tb_remove_open, which is not used in your demo, and found out it didn’t work.
—-
var jThickboxNewLink;
function tb_remove_open(reloadLink){
jThickboxReloadLink = reloadLink;
tb_remove();
setTimeout(”jThickboxNewLink();”,500);
return false;
}
—
jThickBoxNewLink is merely defined as a var, and jThickboxReloadLink isn’t defined anywhere either. Is there anything missing in the code?
ywliu
Hi,
I nees some help. I got a list of urls loaded in ajax (onclick)so thick box doesn’t see them, and I need the href= “‘ +entry.url + ‘”.
I tried your solution but it didn’t work.
Thanks.
@Avi,
You have two choices:
1) You can use <a href="//www.example.com’)">Text</a> or <a>Text</a>
"tb_open_new" function you can find on my current blog post. (http://blogs.digitss.com/technology/hacking-jquery-thickbox/)
2) The other way is to put following line of code once you are done with your AJAX dom manipulation.
$.each( $("[class='someclass']), function(){
tb_init(’a.thickbox, area.thickbox, input.thickbox’);//pass where to apply thickbox
imgLoader = new Image();// preload image
imgLoader.src = tb_pathToImage;
});
Which you can find on top of thickbox.js original file as well, although I did some modification. (instead of onready it’s $.each here according to our circumstances)
and the 3rd and final way is:
3) Give some class to your links which you are loading using AJAX like following:
<a href="http://somelink.here">sometext</a>
and then after your AJAX manipulation code place following code:
$.each( $("[class='dgclass']), function(){
tb_open_new($(this).attr("href"));
}
The third option is hybrid of 1st and 2nd.
I have just wrote code here in the comment box and not tested on browser but I believe it will work fine without little or no modification.
Let me know whether this helped or not?
Thanks a lot, I’ll get back to you in a few days.
Hi again, well slowly slowly we’re getting there. There is one problem now, which is that the ? and params are deleted if there were any on the url.. anything to do about it?
I’m using it like that:
<a href=”#” onclick=”tb_open_new(\” +entry.url + ‘?TB_iframe=true&height=400&width=400\’)”
thanks.
I think I can better describe the problem. all links are getting ? in the end of them. For some it doesn’t matter, and others will open a white page. (if I cut the ? it will open correctly.
http://feed252.photobucket.com/albums/hh12/mama_loids09/nature%20images/feed.rss?
(for example.)
I didn’t get you by above URL as I can’t see anything when I go to that URL.
OK Avi,
I got it; Right now what quick and dirty solution I can suggest you is that don’t put “?” before you put TB_iframe it means that your URL will look like following:
entry.url+”TB_iframe=blah…blah..”
instead of
entry.url+”?TB_iframe=blah…blah..”
I am sure this will help you in this case. Actually this is wrong with the URL it should not behave like this with just “?”; anyways it’s their strategy; you have solution now.
Yes, you’re right, it’s nicely working, thanks!.
Thanks a lot, now I’m using the tb_open_new function. It work great.
Hey I was wondering if anyone knows how to launch the inline content with a js function call. This is the current link.
show hidden modal content.
But I would prefer to us js function to do this.
Thanks
oops the link code is below
\#tb_inline?height=155&width=300&inlineid=hiddenmodalcontent&modal=true\ class=\thickbox\
This looks to be exactly what I want but I am not sure how to use tb_remove_open. Can you give an example? (I keep getting “jThickboxNewLink is not a function”).
Also is it possible to have the modal window content refresh with the content of a hidden div on the same page? For example in psuedo html
stuff in here with link to show content of div id “two” in modal window
this should replace id “one” in thickbox modal window
Link show content of id one in modal window.
What happens when I do it is the stuff in id “two” is appended to the content on id “one” in the modal window.
Any help would be very much appreciated.
David & Yen-Wei Liu,
I was having the same error as you both when trying to use tb_remove_open. Here is what I did to get it to work:
var jThickboxNewLink;
function tb_remove_open(reloadLink) {
jThickboxNewLink = reloadLink;
tb_remove();
setTimeout(”tb_open_new(jThickboxNewLink);”, 500);
return false;
}
Hope that helps.
banktip and others:
Not sure if anybody still needs to know how to do this but I’m going to share anyway.
To close the thickbox window and reload/refresh the parent page you can do it two ways:
#1 – lets say you have a parent page that lists all your contacts. You have a link that opens a thickbox window to create new contacts. On this thickbox window you enter a new contact, click submit, form saves, and reloads thickbox window. If you want to enter another new contact you can in the same open thickbox window. You need a way to eventually exit the thinkbox window and reload/refresh the parent window so all the new contacts you’ve just added are shown. Do this -
#2 – Same as #1 except you only want to enter one new contact at a time and have the thickbox window close and reload/refresh the parent. If the user needs to add another new contact they would click on the link that opens the thickbox window. When you click the submit button on a form it reloads the page, being the thickbox window, after the vbscript that saves to the table the new contact you need to exit the thickbox window and refresh the parent. Do this – (yes, you can call javascript from vbscript code in this manner in all browsers)
<%
.. vbscript code that saves new record….
response.write “self.parent.tb_remove(); parent.location.reload(1)”
%>
Regards,
Torrey
This is way #1 – not sure why it didn’t post properly…
input name=”button_Close” type=”submit” id=”button_Close” value=”Close thickBox” onclick=”self.parent.tb_remove(); parent.location.reload(1)”
Regards,
Torrey
The parent window call back function is really handy. Thanks.
Don’t forget to escape any quotes that you want to pass back to the parent window(caught me out there)
Hi all ..
i’m new To jQuery-thickbox and i need Help .
i used thickbox to open an Asp.net page with more controls and it was good now i have to return selected value from thickbox to the parent page ….
How Can I do that .. plz help me ???
Hi Fady,
To return value to the parent page/form just use self.parent.
for example:
while you are closing your child page which is opened via thickbox you can call following code:
self.parent.passToParentPage(Param1, Param2, Param3);
and function passToParentPage should be defined on your parent page like following:
function passToParentPage(Param1, Param2, Param3)
{
// code which will store Params to hidden variable or do other required processing/computation
}
Let me know if this can’t help you.