Autoloading Thickbox in WordPress
Sometimes you want a modal window to greet your visitor with some kind of call to action before they get to the business of browsing your site. Since WordPress ships with Thickbox you’d think this would be straightforward, but it turns out that Thickbox is really designed to be an onclick attachment, and getting it to just happen on its own is a bit of a problem.
If you examine the Thickbox script you’ll see what ought to be the relevant function, normally triggered by tb_click:
|
1 |
function tb_show(caption, url, imageGroup) { |
But it seems that invoking this function, while it does start up the Thickbox process (the modal background shows up), doesn’t pull up the actual window with its content:
|
1 |
tb_show("caption","/wp-content/my/stuff/..."); |
Well, I was able to determine that it’s the url parameter that fails, and that it remains properly populated up to this point in the Thickbox script:
|
1 |
jQuery("body").append("<div id='TB_load'><img src='"+imgLoader.src+"' /></div>"); |
Happily, the top of the script shows where this is orginally populated:
|
1 2 3 4 5 |
jQuery(document).ready(function(){ tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox imgLoader = new Image();// preload image imgLoader.src = tb_pathToImage; }); |
And it’s because that bit is being bypassed that the tb_show function isn’t working right. So, in order to get Thickbox to autoload, all I need to do is enqueue this piece of script, that re-establishes the imgLoader:
|
1 2 3 4 5 |
jQuery(function(){ imgLoader = new Image();// preload image imgLoader.src = tb_pathToImage; tb_show("caption","/wp-content/my/stuff/..."); }); |
By the way, if you’re doing this in a custom plugin, don’t forget to enable Thickbox to begin with. This fragment does so, and then loads up the script described above:
|
1 2 3 4 |
if (!is_admin()) { add_thickbox(); wp_enqueue_script('tbthing',plugins_url('my-plugin/tbthing.js', dirname(__FILE__ )),array('jquery'),NULL,TRUE); } |
Footnote: while tinkering I found this blog post which discovers a related problem in an earlier version of WP and deals with it in a similar but slightly more involved way: http://www.jes.gs/htmlcss/how-to-fix-thickbox-in-wordpress-2-8/
No comments yet.