For some of my larger images, I usually show a thumbnail in the post, and then allow the visitor to enlarge the image by clicking on the thumbnail. While there are many ways of doing this, I simply used WordPress’ built in ThickBox code to display a larger popup image of the thumbnail. After using ThickBox, I quickly ran into a slight problem – the path to the files wasn’t correct so some of the images weren’t be displayed.
In order to correct the problem, I manually edited the ThickBox Javascript file to point to the correct location, however, each time I updated WordPress to a newer version, the file would be overwritten. This caused me to once again go into the Javascript file and edit the file. I managed to find a better solution on the WordPress forums, which I explain below.
A Better Solution
As mentioned above, I ran into a file path problem when using ThickBox. The location in the Javascript file wasn’t pointing to the correct location for the ThickBox images. This prevented the close button from displaying properly within the ThickBox window.
While doing a search in Google, I came across the ‘Thickbox “Close” not showing’ thread in the WordPress forums. Apparently this isn’t a problem that only I have experienced.
One of the moderators on the forum posted a function that can be added the functions.php file in the WordPress template that will automatically correct the ThickBox path value. Figuring it was an easy fix, I added the code to the file and reset the value in the Javascript file. The code I added was:
function load_tb_fix() {
echo "\n" . '<script type="text/javascript">tb_pathToImage = "' . get_option('siteurl') . '/wp-includes/js/thickbox/loadingAnimation.gif";tb_closeImage = "' . get_option('siteurl') . '/wp-includes/js/thickbox/tb-close.png";</script>'. "\n";
}
add_action('wp_footer', 'load_tb_fix');
I opened a post that used ThickBox to display larger versions of an image. It was a nice surprise when I noticed that the close image appeared on the ThickBox window. The above function worked perfectly. I tried the same code on another WordPress blog, and it worked on that one too.
If you are experiencing problems with the path value that is set in the ThickBox Javascript file, then try using the above function to automatically correct it for your blog. The nice part is, if the code didn’t work, I could have as easily deleted the function from the functions.php file.
| ||||||||
If you liked reading this post, consider following Technically Easy through the following:
on June 4, 2010 at 7:33 pm
Great tip, Paul! I knew about the Thickbox option, but wondered why the proper “X” never appeared.
Twitter: WindowsTalk
on October 7, 2010 at 2:08 pm
perfect Paul! that´s it. you make my day
regards
tabs
on October 8, 2010 at 8:43 am
I glad I could help out.
on October 11, 2011 at 5:50 am
Hm.. This is nice. Thanks!
Andrew Walker recently posted…Five Great Cities to watch hockey