Tag Archives: thickbox

Thickbox and jQuery in WordPress 2.8

The update was great! The new features in WordPress 2.8 are awesome! Most of my Twitter friends have updated to 2.8 and haven’t had a single issue. The new widgets area is so cool! Oh jeez, I’m so excited. For a full features list check out Version 2.8 section in the Codex.

Anyway, the only issue I had so far is the Thickbox usage. I’m not sure why it’s lost, but I’ve discovered it in the Quick Flickr Widget plugin when upgrading. The thickbox feature worked fine in 2.7 and 2.7.1. For an unknown reason, WordPress 2.8 doesn’t call the thickbox.js file through wp_enqueue_script. The other js libraries work fine though (prototype, scriptaculous). jQuery’s being called out too btw, cause it’s a dependency of Thickbox, but thickbox never shows up. This is actually weird. I hope I’m not the only one with this issue, cause it’s starting to feel bad ;)

I’ll submit a bug ticket to their Trac for 2.8.1, but until that here’s a temporary workaround:

global $wp_version;
if ($wp_version == "2.8") wp_enqueue_script("thickbox28", "/wp-includes/js/thickbox/thickbox.js", array("jquery"));
else wp_enqueue_script("thickbox");

Hope this helps. And don’t forget to inject the thickbox CSS and javascript settings in the wp_head action.

Update: Thickbox loads in the footer section in WordPress 2.8, that should be right before the closing body tag. And yes, loads of themes are lacking the wp_footer() function call. So, forget about the workaround, fix your themes first.

The 1.2.9 update of Quick Flickr Widget included the fix above, so 1.2.10 reverts that fix back to the standard way, sorry for the hassle ;)



Quick Flickr Widget: Empowered by Thickbox

Finally, version 1.2.4 is public! Can you belive this? I managed to get Thickbox running with the widget! No, it wasn’t that difficult at all. Here are the two tricks:

In the plugin init:

	$options = get_option("pluginname");
	if ($options["thickbox"] == "checked")
	{
		wp_enqueue_script("thickbox");
		add_action("wp_head", "pluginname_thickbox_inject", 10);
	}

And the thickbox inject function:

function pluginname_thickbox_inject() {
    ?>
    <link rel="stylesheet" href="<?= get_option("siteurl"); ?>/<?= WPINC; ?>/js/thickbox/thickbox.css" type="text/css" media="screen" />

    <script type="text/javascript">
    var tb_pathToImage = "<?= get_option("siteurl"); ?>/<?= WPINC; ?>/js/thickbox/loadingAnimation.gif";
    var tb_closeImage = "<?= get_option("siteurl"); ?>/<?= WPINC; ?>/js/thickbox/tb-close.png"
    </script>

    <?php
}

That’s all. Then use Thickbox the ordinary way you would. Oh and don’t forget to check out the Quick Flickr Widget page for more info on the plugin and once again thank you for all your feedback. It really helps a lot!