ThickBox Content - WordPress Plugin

Table of content:

Current Version: 1.0.3  [ Video Demo ]  [ Download ]  [ Support ]

ThickBox Content provides a quick and easy way to insert any type of content into a thickbox (via page/post editor). It supports thickbox iFrame, Ajax and Inline content types.

The original ThickBox script is already included into the WordPress core, but it's not accommodated to be used in a simple way via page or post editor. This plugin adds a button to the text editor's toolbar and allows to display your content in a thickbox effect. The plugin can include any inline content, iFramed or Ajax content located on other pages.

Installation

  1. Upload the files to the wp-content/plugins/thkBoxContent directory.
  2. Activate the ThickBox Content plugin through the "Plugins" menu in WordPress.
  3. Copy all files from the wp-content/plugins/thkBoxContent/COPY-THIS to your Theme folder. Those are the template files that will be used for iFraming content via thickbox.

Instructions

The plugin is pretty self explanatory, but there are a few things that you need to know in order to get certain functions work correctly.

Displaying a WordPress Page in a ThickBox

If you wish a specific page to appear in a ThickBox effect, make sure you select the "ThickBox Content" template from the "Template" drop down selection list for that particular page. That page name will become available in the "Select ThickBox Content" [ Img. 1 ] drop down selection list in the ThickBox Content Editor [ Img. 2 ].

Displaying Inline Content in a ThickBox

To display an inline content in a ThickBox, highlight the desired part of the content with your mouse and then click the ThickBox Content button [Img.1] in the page editor toolbar. Then enter a unique ID into the "ID of the inline HTML" field [ Img. 4 ]. This way the plugin will automatically hide your content and display it in a thickbox when you click on your link. If you look at the HTML code, you will see that your content is wrapped into div tags like this:

<div id="unique_id_for_the_thickbox">
	<div>Your content is here.</div>
</div>

Displaying iFramed & Ajax Content in a ThickBox

If you would like to embed a web page into a ThickBox that is located on another website, you can do it via iFramed Content setting. Simply enter the link Anchor Text, ThickBox Title, ThickBox dimensions and then the URL of the web page you would like to be framed in the URL field under the Custom URL tab [ Img. 3 ].

The same goes for the Ajax content, the only difference is that the URL has to be local - the web page has to be located on the same domain.

Displaying Images in a ThickBox

ThickBox effect is included into the core of the WordPress by default. This plugin only adds a simple functionality of embedding the content, but it can be done manually without the plugin (see official Thickbox website). So, in order to display images in a ThickBox, all you need to do is to link a thumbnail or smaller version of the images to the original size and assign class="thickbox" to the <a> element around the image like this:

<a href="http//...url to the original image" class="thickbox"><img src="url of the thumbnail" /></a>
This can be done in a matter of seconds by inserting an image via media library, and then adding the class to the link via the HTML editor tab.

Screenshots


ThickBox Content Button [Img. 1]


Existing Content Tab [Img. 2]


Custom URL Tab [Img. 3]


Markup [Img. 4]

Comments are closed! To ask a question, report a bug or make a suggestion, please use Support Forums at WordPress.org

This is a fab plugin, the

This is a fab plugin, the first one to almost work to do what I want!

One problem, though, it's displaying two headers with close X buttons, and I cannot figure out how to eliminate them. Help?

Is there a way you could

Is there a way you could post a link to the place where it appears? On my demo site it works just fine with a single X button in the header. The plugin doesn't implement the thickbox, it actually uses the one that WordPress has already built-in, so everything comes out of the WP package as is. All the plugin does is constructing the correct URLs to trigger the thickbox effect.

You actually solved the

You actually solved the problem in a roundabout way. I reinstalled Thickbox and that took care of it - thank you!

Cool! I'm glad it worked out

Cool! I'm glad it worked out :)

I'm having the same problem

I'm having the same problem with two headers in the ThickBox window, both showing the title of the content and "close or Esc Key". Only the upper Close link works. What did you do to get rid of it ? I tried reinstalling both ThickBox and ThickBox Content and nothing happened.

Tim, scroll down the

Tim, scroll down the comments - I posted the solution there. See if it works for you.

Unbelievably useful Max,

Unbelievably useful Max, really cool! I am building a video tutorial based site and I anticipate using your plugin to display the videos.

Thanks for providing it to the community!

Thank you Adam! I'd like to

Thank you Adam! I'd like to see the implementation of videos with this plugin. Feel free to come back and share a link when you get it up and running.

I certainly will Max:)

I certainly will Max:)

Since there are no

Since there are no screenshots on the plugin's page at Wordpress, can you please point out a "thick box" on this page? I am not sure what it looks like and there are a few things here that could fit that description. Thank You ;-)

Hi and thanks for this

Hi and thanks for this fantastic plugin.

Is it possible to use it directly in the theme (php tags) ?

Regards,

Fabien

Thank you Fabien. I believe

Thank you Fabien. I believe can not use it directly in the template files because it uses shortcodes. I think it has to be a part of the content upon which shortcode filters are being applied. But if you go to the original thickbox page http://jquery.com/demo/thickbox/, you can see how the actual code is being implemented and you can use it directly in your theme template files.

Thanks for the awesome

Thanks for the awesome plugin.

If I am understanding the video demo, I should see ThickBox Content in the template pull down menu, but it's not there. I have implemented inline content with this plugin on the same site already, so I assumed everything was working but the template does not appear in that menu.

Did I miss a step? Is there something else I have to do to make the template show up in that menu?

Shawn, I didn't know how to

Shawn, I didn't know how to include a template from the plugin's folder, so you would have to copy the actual template file from the plugins folder into your current theme folder in order to make it work.

Let me know if you have any other questions.

Hi, i used this plugin but

Hi, i used this plugin but the images Loading animation and X to close window don't appear in thickboxes
the url of images its ok but not appear nothing.
a try to modify file 'thkBoxContent.php' in line tb_pathToImage but don't cause any effect
Help me plz

Close button NoShow in some

Close button NoShow in some browsers!

Hi Max

Thank you for a great plugin!

The "X", or close button does not work, or show properly in some browsers.

1. Firefox 3.5. - Close button does not appear at all in, there is not any reaction on mouse cursor either, when i hover it over, where the button is suppose to be.

2. Chrome 2.0.172.33. - Some image is appearing in the area where the close button is suppose to be, but not the "X", it is clickable though, and the Thickerbox closes.

3. Opera 9.64. - Same as #2. except that it appears a text, "Image".

4. Safari 4.0 (530.17). - A image of a question mark appears, it is clickable, and the Thickerbox closes.

5. IE 8. - A "X" appears, and it is working as it suppose to, but it still does not look like it renders correctly.

All closes when clicking on the side of the Thickerbox.

Any way that i can fix this my self, or is it a bug that you have to remove?

I really like this plugin, and i like to use it, but i am a little afraid that some of my sites guests would not figure out how to close the Thickerbox.

I will provide the link to my site, so you can see for your self. For all i know, this could be an issue that concern my site only. I do not think so though, because i have tested it in two different themes, and the same issue goes for both.

The first theme i used was SchemerMag Theme - http://www.wpthemedesigner.com/2009/03/24/schemermag-theme/

The one i use now is Thesis - http://diythemes.com/

I have only a few test posts now, and there is a Thickerbox link in all of them.
My site - http://finnproduktet.no/

Best Regards

Frode L

Hi guys, looks like Jorge

Hi guys, looks like Jorge Herrero and Frode L have the same problem. Could you both try adjusting the following code and then write me back if it works for you: File thickBoxContent.php - line 71
add_action( 'wp_head', '_load_thkBox_images', 11 );
change to
add_action( 'wp_footer', '_load_thkBox_images', 11 );
it works for me - now X images appear in Firefox and Chrome. I didn't test the rest of the browsers though.

Hi again That worked

Hi again


That worked perfectly, thank you very much again for this great plugin.

Best Regards


Frode L

Great! I'll commit that to

Great! I'll commit that to the next release.

What would cause this: When

What would cause this:

When I click on the new button in my editor, a pop up window appears, but it shows me my home page instead of the options?

Hey Mike, thanks for giving

Hey Mike,

thanks for giving a shot to our plugin :)

Take a look at tinymce/editor_plugin.js - in the first function that opens /window.php file - if the attribute "file" has incorrect path it actually loads the home page in that popup window.

So, there are 2 ways of fixing this - you can simply hard code the URL to the window.php file (remove the url variable and write your own), or you can add the following code to the thkBoxContent.php file:

function _load_admin_scripts(){
echo "\n" . '<script type="text/javascript">var url = "'
.thkBoxContent_URLPATH .'tinymce;"</script>'. "\n";
}
add_action( 'wp_print_scripts', '_load_admin_scripts');

I would stick with the second one.

If the code works for you - let me know and I will commit the changes to the plugin.

Thank you for the plugin! I

Thank you for the plugin!

I am having some trouble. I am using Wordpress 2.8.4 with the Ahimsa theme. I have installed the plugin and used it for inline content. Everything seems to be working, except when I click on the link that is produced when I use the plugin, I get the canned Firefox "URL is invalid and cannot be loaded" error.

I've tried both of the fixes you've presented in the above comments (just in case those issues and mine were related) with no success. Any help?

Thank you!!

Hi April, Could you please

Hi April,

Could you please provide a URL to the page where link doesn't work?

Hi, this is a fantastic

Hi,

this is a fantastic plugin. I got just one question. Is it possible to link a picture to an iFrame content? How would I achieve this?

Thanks

Thomas

Thanks Thomas! Yes, I

Thanks Thomas!

Yes, I actually created a demo video for someone with the same question, see if it still works.

That's for the video of

That's for the video of using a picture instead of text. Is there any way of getting options for the window? Right now mine is centered and too big to see the top and bottom (because of the form I have in the url) I want it to line up at the top, not center (so you can see the title and top bar) How can I do this??
Great plug in!

Thickbox by itself doesn't

Thickbox by itself doesn't offer window positioning options. May be there are ways to hack/add it, I haven't looked into it, but in your case even if you manage to lower the the position of your pop-up - it still will be hidden at the bottom, because it simply won't fit on many screens. It's too large. I would suggest to set the height of the window to something like 800px or even 700px and add the scroll bar on the right side. I think this would be a better solution for you.

Thanks for the compliment, and I really like your implementation of the forms in the lightbox.

Thanks! Its really hard to

Thanks! Its really hard to find a nice lightbox for urls. I tried greybox but was having trouble with the onload and ie for some reason and the use of the rel attribute left you without an option of putting in a nofollow tag. Thickbox content works great. Its nice to have a professional looking form on the website without having to leave the page. I did take the form down to 800px and hopefully that will work for most people.
Thanks!

You're welcome! Looks pretty

You're welcome! Looks pretty cool - I like it :)

Thanks for the awesome

Thanks for the awesome plugin, I like it very much. Great work Max Chirkov!

When I try to install this

When I try to install this plugin in WordPress 2.8.5 I get a warning that the plugin is not tested for the version of WP. Is it still safe to install?

Yes Matthew, it is safe.

Yes Matthew, it is safe. WordPress just implemented a beta "Compatibility" widget, and I guess it signals you that it is not tested with that version of WP. I just marked it as "works", so it shouldn't show any indicators any longer.

Is there any way to make the

Is there any way to make the url work in the sidebar?

I'm sorry, which URL are you

I'm sorry, which URL are you talking about?

Oops, sorry about this, I

Oops, sorry about this, I got confused, I thought this question was about a different plugin :)

You can install Advanced Text Widget - it allows you to insert shortcodes in sidebars as well as makes regular Text Widget capable of doing the same.

Hi im struggling to

Hi im struggling to customize this and wonder if anyone can help me out...

here is a link to a pic of what I have at the moment... http://farm3.static.flickr.com/2446/4074856331_73cb8af6ff_o.jpg

What I actually want to do is just have the white background in the thickbox to an opacity of say 50% but not have it affect the title, images or text... I have been having a play around with the css file to make it how I want but have got stuck here.

I have currently changed the id #TB_window to opacity of 50% but as you can see it affects everything...

Any ideas?

carl_smith_2@hotmail.com

Hi Carl! Our plugin uses the

Hi Carl!
Our plugin uses the default thickbox styles provided with WP installation, so this would be irrelevant to the actual plugin. From my own experience, if you apply opacity to an element - all child elements will inherit the same values and I never was able to get it to work otherwise.

This is an awesome

This is an awesome plugin!
I'm trying to use it open a page containing a cforms II form... everything is working fine, but do you know how I could make the thickbox window close when the form submits?

Hi Jesse, glad you like the

Hi Jesse,

glad you like the plugin :)

It looks like that tb_remove(); function is responsible for the thickbox window closing. You can try executing it within the actual thickbox after the form is submitted. You can take a look at the instructions and demo examples on the official thickbox page http://jquery.com/demo/thickbox/

I am having an issue where

I am having an issue where my navigation text is displaying on top of the thickbox. I am wondering if there is a css class I can use to change the z-index of the thickbox?

Hi Dave, Thickbox naturally

Hi Dave,

Thickbox naturally comes with WordPress, so we didn't add anything of our own to its performance and presentation besides the controls in the backend. From what I see by using Firebug, you can probably adjust z-index of the ID #TB_window, which is currently set to 102. Hope that helps.

This looks like the perfect

This looks like the perfect plugin, exactly what I'm looking for, but I'm getting some weird problems. I've spent a some time troubleshooting and searching for similar problems, but no luck.

To recap, I have the folder "thickbox-content" unpacked to my WP plugin folder. I tried renaming the folder as "thkBoxContent" (as it shows in the readme), but that led to a 404, so I went back to the original name.

I copied the two files in "COPY_THIS" to the root of my theme directory.

First thing I noticed - When I go to create a page/post, I see the new Thickbox icon in the MCE, but when I hover it says "Insert an RSS Feed." However, when I click on the button I get a "Internal Server Error" message (note, the error message is showing in a thickbox frame, so the jquery is working)

Second thing I noticed - I can apply the "Thickbox Content" as the page template, and it does indeed change the page when I navigate directly to it, but it doesn't show in a thickbox frame with opacity.

So that's where I am - the MCE button doesn't appear to be working, and the page template isn't rendering the thickbox frame.

Couldn't find anything on google or other Thickbox Content forums/comments. Looks like a great plugin - I'd love to get it working.

Appreciate any suggestions.

Thanks,

Jacob

Hi Jacob, thank you for the

Hi Jacob,

thank you for the feedback. I can't reproduce the same issues that you mentioned above, but I went ahead and released the latest update, see if that helps. Thank you.

Hi, I have followed the way

Hi, I have followed the way to install this awesome box to my wordpress.

However when I'm trying to use the thickbox button. It only shows a box with grey bar on top. Nothing else is showing up. When I try to look for error, they give me this.
Anyone know what's wrong?Help appreciated, thanks.

Message: Invalid character
Line: 1
Char: 7
Code: 0
URI: http://mensenses.6te.net/blog/wp-includes/js/tinymce/tiny_mce_popup.js

Message: 'tinyMCEPopup' is undefined
Line: 10
Char: 1
Code: 0
URI: http://mensenses.6te.net/blog/wp-includes/js/tinymce/utils/form_utils.js

Message: 'tinyMCEPopup' is undefined
Line: 88
Char: 1
Code: 0
URI: http://mensenses.6te.net/blog/wp-content/plugins/thickbox-content/tinymc...

Thanks for the response. I

Thanks for the response. I updated the plugin - hover tag no longer shows 'RSS' but I'm still getting a 500 error when I click the MCE button.

I'm fairly certain I've got some mod_security issues with my host. Can't get timthumb.php to work either.

Appreciate the work you do for the wordpress community.

Thanks

To be honest, I don't know

To be honest, I don't know what else to look at. Sorry I can't be of any help at this point. Thanks for trying using the plugin!

Nice one !! Here's my

Nice one !!
Here's my question tho :
- it does not validate (w3c) ?
- when javascript is not activated the inlinecontent is not shown ?

Does anyone have solutions to those issues please ?

Thanks

Hi Mike, The plugin should

Hi Mike,

The plugin should validate since it's using all standard HTML markup.
The reason why the inline content is not showing up is because it's hidden by CSS. I guess it could be re-written to hide the inline content with JS instead of static CSS.

Is there way to get this to

Is there way to get this to work in a text widget?

Hey Matt, You can post raw

Hey Matt,

You can post raw HTML markup generated by the plugin into the text widget, but there are no automatic options that will paste a shortcode into the widget for you. Take a look at the examples here http://jquery.com/demo/thickbox/ - you can use the same code in your text widgets directly and it should work.