Using wordpress native thickbox

To know about what is thickbox please check this link. WordPress use this a main popup window or modal view. Thickbox is a jquery plugin and it’s available with wordpress with jquery. So my tips is how to use that in front end , using the thickbox available with it, no need to use externally.

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

At first let me tell you where you can get it if u search wordpress directory manually. Just check in wp-includes\js where you will get all the js library and plugins used with wordpress or available for use with plugin and theme. And here is every thing you need for thickbox
wp-includes\js\thickbox

Let me tell you now how to use it in theme or plugin. Let’s play with functions.php file of your theme file
Add this line in your functions.php file any where with care
[code language=”php”]
function add_themescript(){
if(!is_admin()){
wp_enqueue_script(‘jquery’);
wp_enqueue_script(‘thickbox’,null,array(‘jquery’));
wp_enqueue_style(‘thickbox.css’, ‘/’.WPINC.’/js/thickbox/thickbox.css’, null, ‘1.0’);
}

}
add_action(‘init’,’add_themescript’);
[/code]

wp_enqueue_script function is used to load js file using theme and plugin. It helps you to load library js and plugin availble with wordpress and as well as loading js from external links like from theme , plugin or external sites. Also it will not load same js file again and again if same function used in diff plugin and theme. To know more about adding java script and stylesheet(custom css file) see in wordpress codex adding js and adding css

Hei, we are not done yet. need to do some lines more so that the loading image and close button show properly. Open your footer.php and write the follow lines before wp_footer() this.
[code language=”php”]
<script type="text/javascript">
if ( typeof tb_pathToImage != ‘string’ )
{
var tb_pathToImage = "<?php echo get_bloginfo(‘url’).’/wp-includes/js/thickbox’; ?>/loadingAnimation.gif";
}
if ( typeof tb_closeImage != ‘string’ )
{
var tb_closeImage = "<?php echo get_bloginfo(‘url’).’/wp-includes/js/thickbox’; ?>/tb-close.png";
}
</script>

and how to use thickbox you can see the <a href="http://jquery.com/demo/thickbox/"> thickbox page</a> in jquery site .
[/code]

To show feedbernuer subscription link in popup windows I used this code
[code language=”html”]
<a href="http://feedburner.google.com/fb/a/mailverify?uri=manchumahara&amp;loc=en_US&amp;KeepThis=true&amp;height=450&amp;width=600&amp;TB_iframe=true" class="thickbox">Subscribe to my blog via Email</a>
[/code]
That’s all.

Hei don’t think I will now say … pls donate me if you like my writings… because I have removed my donate button as nobody care about my time to do all the plugins/extentions and tips 😛

Tataz