I created a plugin for WordPress that helps you to embed ThickBox into your blog. Just install and activate the plugin, add ThickBox compliant markup wherever you want and you’re all set. Furthermore, you can use SmoothBox instead of ThickBox if you like.
You can download the plugin here.
How to
Once you activate the plugin it’ll include the CSS and JavaScript for ThickBox into each and every page on your blog. This way you can put ThickBox compliant markup wherever you want and everything should work as expected.
Have a look at these examples if you’d like to know how to insert the code into a post or page. For the gallery on this page I used the following markup:
<a href="[...]/images/flower.jpg" title="Flower" class="thickbox"> <img src="[...]/images/thumbs/flower.jpg" alt="Flower" /> </a>
All you have to do is to put an img tag inside an a tag where the former holds the smaller and the latter holds the larger image. This results in a nice image gallery.
Configuration
The plugin comes with a settings page that helps you to adapt the plugin’s behavior to suit your needs. Although most of the options are pretty self explanatory there’s a help link next to every option.
Help
If the cool effect doesn’t seem to appear, go check these things:
- Is your markup correct? Have a look at the examples and learn how to supply markup ThickBox understands.
- You had ThickBox on your site and switched to Smoothbox and now it isn’t working? Don’t forget to set the
classtosmoothboxinstead ofthickboxin the HTML markup. In this regard, the libraries aren’t compatible with each other. - Is the CSS and JavaScript included in your page? If you enabled the expert mode don’t forget to add the custom field
thickboxto your page. Finally, make sure your theme has calls towp_headandwp_footerinheader.phpandfooter.phprespectively.
Still need help? Write a comment.
Special use cases
Here I collect some special issues regarding ThickBox.
Changing ‘close or Esc key’
The plugin comes with the default (english) and a german translation of ThickBox and SmoothBox. Whether you just want to change the text saying close or Esc key or add more internationalization to ThickBox you can do it like so:
- download the uncompression version of ThickBox from here.
- do a search and replace, so everything fits your needs. For example, change close or Esc key on lines 128, 196 and 204.
- optional: compress the JavaScript with a tool.
- copy the new JavaScript file over the original one in the plugin located under
wp-content/plugins/thickbox/thickbox/thickbox.js.
Once you’ve done that the ThickBox is customized to suit your needs. But instead of replacing the original version of ThickBox you can read more about variants in the corresponding help box on the plugin’s settings page; indeed, you can manage more than one variant with the plugin.
Open ThickBox onload instead of onclick
In case you’d like to open a ThickBox onload instead of the usual onclick here you go:
- add the following JavaScript snippet to your HTML header, i.e. somewhere inside the
headelement:<script> function showThickbox() { $(document).ready(function() { tb_show("Page", "somepage.html?height=200&width=400", ""); }); } </script>Adapt
Pageandsomepage.htmland the following parameters to suit your needs. - Add this
onload="showThickbox()"to e.g. thebodyelement. This way the Thickbox loads every time the page loads.
That’s it. Now use PHP to to add some sophistication to this.
You can download a working example here; have a look at the file test.html first.
Examples
A simple gallery of images might look like this:
An iFrame is easy too.
170 comments ↓
Still no dice, though. The behaviour is simply that the javascript isn’t being loaded and therefore the link target isn’t being “thickboxed”.
Which leads me think that it’s something to do with the way the includes are being done.
Since thickbox and mootools and jquery are all included with Wordpress core as of 2.8.x., is it possible that your include mechanisms are in conflict with Wordpress?
My template page does not overtly call for those scripts to be loaded by default, which makes me wonder if I need to include them in my header.php…? Which confuses me a bit since I think the main purpose of the plug-in was for people to avoid needing to include the javascripts manually.
Pointers?
Greg
the plugin doesn’t use the default mechanism of WordPress to load the JavaScript/CSS. It was implemented this way because the plugin should allow you to select different versions of ThickBox, i.e. an english one, one with german text or even SmoothBox which is very similar to ThickBox. Another reason for this behaviour was the idea to put the CSS into the HTML header and the JavaScript somewhere at the bottom of the page; this should speed up loading of the page.
If the theme or some other plugin already adds jQuery or ThickBox to a page, the plugin won’t notice it and you’ll end up with ThickBox included twice – this is something a future version should fix.
Anyway, just make sure that your theme has got calls to
wp_headandwp_footerin the filesheader.phpandfooter.phprespectively. If that’s the case the plugin should work just fine.BTW: Looking at your site shows me that the frontpage includes jQuery three times; maybe this causes the plugin to fail.
The site I’m actually working on is a corporate site, so unfortunately there’s no public link to it right now. Looking at the source code post-render (ie. after all the includes are done) and that page only includes jQuery once, which is a manual include. Then I see only one include for your plug-in, which points to the .php.css file.
I call wp_head and wp_footer in the header and footers respectively. Still no dice.
I’ll drop you a confidential note as well, in which I can share some of the source code so that you’re not in the dark.
Thanks for your time.
Greg
have you had a look at the examples here? It seems that you’re looking for the description under Gallery Images. Don’t forget the
relattribute.since the instructions for ThickBox can be found on a separate website I haven’t copied those to my page. All these questions aren’t really related to the plugin but ThickBox itself, so I think it’s just okay to read about this stuff on the ThickBox page.
Anyway, if you were able to do what you want with another plugin that’s fine too.
Thanks!
this is a quick (read: not that fancy) way to do this but here you go:
Save the file to, say,
video.html. Adjust the background color to suit your needs by changing thebgcolorattribute of thebodyelement.bodyelement with the code that embeds the video; just copy the code from the right panel under the description of the video from the YouTube website.Make sure that the location to the HTML file you uploaded earlier is correct.
You can repeat this process for every video or in case you know a bit PHP you can use one script that displays the right video given some parameter.
have you heard about this problem ?
Danke schon mal…
bezüglich JavaScript und jQuery wird nicht eingebunden: Punkt 3 unter Hilfe bist du durchgegangen?
Wenn du allen Bildern die Class zuweisen möchtest, würde ich dir den Search and Replace Plugin empfehlen, mit dem du bei sämtlichen Links die Class eintragen lassen kannst. Allerdings solltest du dabei etwas vorsichtig sein (Datenbank-Sicherung anlegen).
Was the text link class addition not a possibility?
you’re talking about the
reland not theclassattribute, right? Although it’s now possible to let the plugin add the class attributes to images generated by the gallery shortcode I haven’t worked on anything that’s got to do with the visual editor. I’m looking forward considering this for the next release.My only question and this is really pertaining to Wordpress, when someone creates a link there are some default classes in the editor, can “thickbox” be added to that drop down some how? The people I am setting blogs up for don’t understand html, but a simple drop down selection would work for them.
Again, great plugin!! Thanks!
thank you for the short but nice review and yes, I’m looking forward to extend the rich text editor that comes with WordPress to make adding the class easier for everybody. This will be packaged into the next release which is due at the end of this month or at least early next month.
Any ideas on how to fix this? The theme loads the following javascript:
coda-slider
jquery.localscroll-1.2.6-min
jquery.scrollTo-1.4.0-min
jquery.serialScroll-1.2.1-min
jquery-1.2.6.min
preloadCssImages
Could the .js the plug-in loads be interfering with any of those? The jquery carousel only appears on the front page and I have no intention of using thickbox on the front page, is there any possibility of configuring the plugin to only load on post pages? Is this possible or doable? I have little in the way of php and javascript experiences, so in any sort of response treat it as though you’re talking to a 5 year old haha. Thanks!
Very easy to implement.
loading jQuery twice isn’t a good idea and may result in this error. Please have a look at the plugin’s option page and check out the help section on expert mode: this helps you to include jQuery and the CSS/JavaScript needed for ThickBox on particular pages only.
My only concern is I see expert mode mentioned once above but clicking on that doesn’t result in a link, and I don’t see an options page either here or in any of the included files in the plugin. Is there a page I’m missing? This would be exactly what I need, if I can set the default for the plugin to only be turned on when I make a certain change inside of the post in wordpress that would solve all my issues. Thanks!
I’ve removed the dangling link you were talking about – the documentation regarding the settings of the plugin can be found on the settings page under Settings – ThickBox. Just click on the little “Help” links.
I keep getting an error when I click on the the thumbnail for the video to open in thickbox. It says “The URL is not valid and cannot be loaded.
How can this error be corrected?
Please advise as to how to get your plugin to work with the YouTube one? Is there additional code that I need to insert in order to get your Plugin to work?
I haven’t heard of this plugin before, thus never tried it myself. So, I can’t tell you how to get this working. My best guess is that you’ll have to make sure that the links to the videos use the markup required by ThickBox; e.g. the
classset tothickbox, etc. To learn more about this, please have a look at the examples that show you how to get ThickBox working.Dein Plugin ist klasse! Die Standardfunktionalitäten habe ich ganz gut im Griff. Jetzt kämpfe ich mit einer speziellen Anforderung, für die ich keine Anleitungen finden konnte.
Ich will Inline Content ausgeben, wenn auf ein Bild geklickt wird. Meine Versuche, den Quelltext der Examples so zu kombinieren, dass der Link auf dem Bild liegt und der verlinkte Inhalt “Inline-Bestandteil” der Seite ist, sind leider gescheitert. Geht dies grundsätzlich? Was ist zu tun?
ob der Link nun über ein Bild ausgelöst wird oder einfach per Text sollte meiner Erfahrung nach egal sein. Schau doch mal auf der Admin-Seite des Plugins nach: dort gebe ich (nicht sichtbaren) Inline Content in den ThickBoxen aus, wenn du unter den einzelnen Einstellungsmöglichkeiten auf “Hilfe” klickst. Kannst du es dir dort abschauen?
Ein anderes Beispiel habe ich gerade nicht zu Hand, solltest du es aber partout nicht zum laufen bekommen, melde dich nochmal bei mir.
However, I’m also wanting to open popups onload instead of onclick for some pages. I have onload=”showThickbox()” in the body tag for all pages (ie in the template). The popups work when I include the the onload script at the bottom of the posts that I want popups for (so I can select which pages/posts have popups) – but only if Expert mode ISN’T ticked.
So currently, either the popups work but the frontpage slider doesn’t, OR the slider works and the popups don’t.
Note that image popups (where you have to click the thumbnail) only work when Expert mode is set to off.
Currently working on a local installation for a client, so I can’t point you to the site. Using WP2.9.2, and latest Thickbox plugin and Arras theme. I can provide a copy of the generated source if that helps. Thanks!
Leave a Comment