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.
There were a couple of problems with the plugin though when I started using it. For one, the plugin has not been updated in a long time and was not compatible with the latest version of jQuery: 1.3.1. It also used a rather non-standard way of configuration and was completely non-extensible. In fact, it required users to edit CSS and Javascript files in order to point the library at the right images to use. That's no good at all because it makes it possible for a simple upgrade to break a site, granted in a minor way, but still.
No doubt the original author of the plugin has a million other things on his plate, so I thought I would chip in, upgrade the plugin, and contribute them back to the author and community, and if necessary take over maintenance of the plugin.
Upload the thickbox files to your web server.
In your web page using thickbox, import the javascript like so:
<script type="text/javascript" src="jquery.thickbox-byrne.js"></script>
In your web page, import the CSS like so:
<link rel="stylesheet" href="thickbox.css" type="text/css" />
Read the rest of this documentation and initialize thickbox according to your needs.
The following options can be used when initializing Thickbox.
macFFBgHack - default: '../images/macFFBgHack.png'.
A path to the image "macFFBgHack.png" on your web server.
loadingImage - default: '../images/thickbox-loading.gif'.
A path to the image "thickbox-loading.gif" on your web server.
modal - boolean (true|false), default: false.
Determines whether or not the dialog that appears is modal or not.
iframe - boolean (true|false), default: false.
Determines whether or not the dialog will be iframed content.
inlineId - string, default: ''.
Sets the DOM id that contains the content that will be displayed in the thickbox.
width - default: 600.
Sets the size (width obviously) of the thickbox.
height - default: 400.
Sets the size (height obviously) of the thickbox.
$('a.thickbox').thickbox({
macFFBgHack: 'images/macFFBgHack.png',
loadingImage: 'images/thickbox-loading.gif'
});
The version described here is '1.3-byrne' which is a fork of the original Thickbox plugin versioned 1.3. Here is a list of the changes I have made in my fork:
$("a.thickbox").He made several programmatic and styling fixes and I can't remember whether or not they were all integrated with Cody's original when he did eventually do an update. Most importantly, though, it also implemented a way to assign the TB action to a jQuery selector(making it more "plugin-like"), so that authors wouldn't have to add the class="thickbox" every single time, and that definitely wasn't picked up by Cody. You can find Klaus' version in the jQuery Google Code project under trunk/plugins. You'll have to check the code out; the web interface only shows a partial listing for that dir. I'm having trouble finding the post--or I suspect e-mail--where Klaus went over all the details of what he changed, but here's a start.
]]>I used this thing somewhile ago. Glad you've made for MT4. But I cannot see the code which you are mentioning in bullet 2 and 3..... Do I miss something?
]]>BTW - this is not for Movable Type. This is a generic jQuery plugin.
]]>I'm not a programmer so I'd like to know; why is there a need to assign the image path in both JS files now?
BTW, your comment form kept saying I needed to input my email and URL when I've already did - in Chrome.
]]>I used to simply do :
$(document).ready(function(){ tb_show('title','myUrl',null); }
this no longer seems to work.
]]>$(document).ready(function(){
tb_show('title','myUrl',null);
});
Becomes:
$(document).ready(function() {
$(a.thickbox).thickbox({
});
});
This will trigger the thickbox when you click the a link with a class of thickbox. Are you trying to trigger it on page load?
]]>How would I be able to do this using the new system?
]]><a href="page.aspx?height=600&width=950&modal=true" class="thickbox" title=""> Test </a>
If this is wrong, could you post an example usage?
]]>To fix the problem make the following change (approx. line 222):
} else if (settings.iframe) { tbposition(); tbshowIframe(); }
You can remove the "Safari fix" part, as it is basically doing the same thing as tb_showIframe() anyway.
I attached an updated zip with the changes to the ticket for this bug. If you want, go grab it: http://majordojo.lighthouseapp.com/projects/33302/tickets/4-thickbox-byrne-issue-error-on-modal-iframe
]]>If this code happens to be at the bottom of a long page - more than a scroll down - then the full image pops up at the top of the page - where the user has to scroll up to look for it.
Is there a solution to this?
]]>