Extension: JQThickBox

Download link: JQThickBox

From the ThickBox homepage:
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.

Now developers can integrate ThickBox functionality into their extensions quickly and easily, without having to worry about conflicting with other extensions using older/different versions of ThickBox.

I'm using Klaus Hartl's ThickBox 2.1 variant currently, as it seems that little bit better than the *ahem* vanilla ThickBox 2.1.

JQuery extension needs to be installed and enabled first in order for this to work.

To do:
+ Convince extension authors to support this package!

Thank you to Johan Sundström for the "#TB_window *" CSS trick that was preventing me from releasing this.

SkyBoy

On the line 34 of thinkbox.js $("body").append("<div id='TB_load'><img src='loadingAnimation.gif' alt='Loading' /></div>"); could be $("body").append("<div id='TB_load'><img src='extensions/JQThickBox/loadingAnimation.gif' alt='Loading' /></div>");

and below the line 26 default.php 'termsofservice.php')))
$Head->AddStylesheet('extensions/JQThickBox/thickbox.css');
$Head->AddString('
<!--[if lte IE 7]><link rel="stylesheet" href="thickbox.ie.css" type="text/css" media="screen" /><![endif]-->
');
$Head->AddScript('extensions/JQThickBox/thickbox.js');may be 'termsofservice.php'))){
$Head->AddStylesheet('extensions/JQThickBox/thickbox.css');
$Head->AddString('
<!--[if lte IE 7]><link rel="stylesheet" href="thickbox.ie.css" type="text/css" media="screen" /><![endif]-->
');
$Head->AddScript('extensions/JQThickBox/thickbox.js');
} or get preview extenstion error.

[-Stash-]

Good catch SkyBoy. Also, thinking about it, there's going to be a similar path problem with thickbox.ie.css in the conditional comment. I guess I could just concatenate it with something that will put the forum path and the extension path in there. Is there something like VANILLA_PATH ?

jimw

I've used both of these:
$this->Context->Configuration['APPLICATION_PATH']
get_settings('siteurl')
You could echo each one to make sure you are getting what you need.

Jazzman

Yo Stash,

As I'm updating my Inline Images extension, I came accross your JQuery and JQThickBox extensions. I have the following remarks:

- You use the following code:
$Configuration["JQTHICKBOX_PATH"] = 'extensions/JQThickBox/';
But it isn't used in your extension, so why add that Configuration parameter?

- You use the following code to add configuration settings:
AddConfigurationSetting($Context, 'JQTHICKBOX_VERSION_EXT', '1.0.0');
But this code gets executed everytime your refresh your browser, which means it will write to the configuration file every page load. I suggest you add:
// Set the Extension and JavaScript version numbers.
if( !array_key_exists('JQTHICKBOX_VERSION_EXT', $Configuration)) {
AddConfigurationSetting($Context, 'JQTHICKBOX_VERSION_EXT', '1.0.0');
AddConfigurationSetting($Context, 'JQTHICKBOX_VERSION_JS', '2.1');
}

- I've noticed the JQuery extension needs to be loaded BEFORE JQThickBox is loaded. Maybe you could mention that in your ReadMe's (if you haven't done already)

Other than that, these are fine extensions :) And they work flawlessly with my Inline Images extension :)

[-Stash-]

Thanks Jazzman, I've been looking for a little guidance on these little things as I get to grips with Vanilla and learn PHP. So thank you very much!

Is there a way for "JQPluginExtensions" to check to see if the JQuery extension is enabled and if not, not enable themselves and tell the admin? Perhaps even have them enable the JQuery extension if it is there and THEN enable themselves with a little message telling the admin that JQuery has been enabled?

Jazzman

Np Stash. Also add that configuration check in your JQuery :)

[-Stash-]

Sorry, I wasn't clear. I was asking *how* I do this :D

Is there a way for extensions to check for other ones and then enable themselves and others in a specific order?

Edit: I misunderstood you as well :) I shall add that check.

[-Stash-]

Also, would it be worth checking for both of those values separately? // Set the Extension and JavaScript version numbers.
if( !array_key_exists('JQTHICKBOX_VERSION_EXT', $Configuration)) {
AddConfigurationSetting($Context, 'JQTHICKBOX_VERSION_EXT', '1.0.1');
}
if( !array_key_exists('JQTHICKBOX_VERSION_JS', $Configuration)) {
AddConfigurationSetting($Context, 'JQTHICKBOX_VERSION_JS', '2.1');
}
And if there's an older version in, such as JQTHICKBOX_VERSION_EXT 1.0.0, will it update it to the newer value, in this case 1.0.1?

[-Stash-]

Hmm, I've tried using:$Head->AddString('
<!--[if lte IE 7]><link rel="stylesheet" href="'.$Context->Configuration['APPLICATION_PATH'].$Context->Configuration['JQTHICKBOX_PATH'].'thickbox.ie.css" type="text/css" media="screen" /><![endif]-->
');
But that gives me:<!--[if lte IE 7]><link rel="stylesheet" href="/home/exhibitq/public_html/treasurytoday/extensions/JQThickBox/thickbox.ie.css" type="text/css" media="screen" /><![endif]-->
Instead of what I want, which is a nice neat:<!--[if lte IE 7]><link rel="stylesheet" href="/extensions/JQThickBox/thickbox.ie.css" type="text/css" media="screen" /><![endif]-->

Is there another variable (is that what they're called?) that will give me the result I want?

P.S. Jazzman, I'm using that Configuration dooberry now ;)

Jazzman

Use WEB_ROOT instead of APPLICATION_PATH :)

[-Stash-]

Thanks Jazzman, much appreciated.

JQThickBox 1.0.1 released!

[-Stash-]

Perhaps someone can help me out with this. The code Jazzman suggested above does not update the values when you update the extension, thus leaving you with outdated configuration information.

Is it possible to do a check to see...
if the value first exists,
if it doesn't, create it
and if it does,
check to see if it is different,
and if so, overwrite it.

This way if you put an older version of the extension back in, it will update the version info to the correct value.

[-Stash-]

Updated to work with jQuery 1.1 and fixed the path to the loading animation again, hopefully for the last time...

[-Stash-]

Updated to work natively with jQuery 1.1.1. Also, the loading animation image is now precached. Enjoy :)

jimw

I just updated to the latest versions of jquery and jqthickbox. I reactivated them jquery first. I get a js error from thickbox.js line 263 that jquery is not defined. Any ideas why this is happening?

[-Stash-]

Hmm, not sure. I just installed a brand new vanilla 1.0.3 to a virtual machine and stuffed JQuery, JQThickBox, Attachments and InlineImages into the extensions directory and enabled them in that order and it just worked. I deliberately downloaded the files new from the add-ons repository as well, so I can only suggest you try disabling them, downloading, uploading and enabling them again.

Do you have SmoothPageJump installed? Can I see the forum where you're getting this problem?

MySchizoBuddy

u should deactivate both of them, then activate jQuery first. we should have drag and drop order for extensions. So the ones we want to appear first in the header can be put on top of the order.

jimw

Here is my forum. I don't have SmoothPageJump installed. However, I still have Attachments 1.4.1.

[-Stash-]

Ahhhhhhhhhhh, and if I remember correctly Attachments 1.4.1 has moo.fx or something similar in it? So try disabling attachments 1.4.1 (really you should upgrade ;)) and then enabling it so that it's activated AFTER the JQ extensions. I can't access your forum atm (router's been a bit dodgy lately) so I can't see what order you have things enabled in.

jimw

I tried this on my local install first. Attachments 2.1 activated and I imported my attachments. No js error now. However, I now have only links in my comments, no images. When I click on the link, it asks me to save or open.

[-Stash-]

Did you use the import feature in Attachments 2.1?

jimw

Yes, I did. I didn't see any instructions for the Attachments 1.4 to 2.1 upgrade. Maybe I did that wrong. I first deactivated the 1.4 version. Then I deleted the folder. Then I copied over the new 2.1 folder. Then I activated it. The settings were there so I imported. Does this sound right to you? If so, I'll do it on my live site.

[-Stash-]

Sounds right to me, but if it didn't work on your test forum, I'd start a new discussion here and ask a bit more first. This is going beyond my knowledge of Attachments1/2 and the scope of this discussion I'm afraid.

jimw

Well, I went back to some Attachments 2 discussions and saw that I should have just overwrittern the old 1.4.1 files. So, I put everything back and put the 2.1 files on top. Now, I have an icon in my post next to the image file name. But it still doesn't display. I guess I need to install InlineImages?

edit: wala! After adding the InlineImages 1.3 and activating thickbox setting, all is well. So, for dummies like me, there should be a message that tells me I need Attachments2.1, InlineImages1.3, jQuery, and jqThickbox for this to work.

edit part deux: Oh well, no success on my live site. All worked well on my local forum, but when I did everything live, the image opens in a new browsed window. And I still have the js error.

edit part3: I looked at the error again (which I see in FF using FireBug) and it is from the thickbox.js in JQThickBox.

[-Stash-]

I notice you're using BoxOverand some other JS in the head as well. Try disabling BoxOver and see if that helps...

Edit: I just downloaded a brand new copy of JQThickBox from the add-ons site and did a file compare with the thickbox.js on your site and they're identical, so it must be conflicting with something, because that exact same file works perfectly for me.

jimw

I deactivated both the boxover and ibox extensions with no change. Could it be the jquery.js file? When I pull this file into my editor, it is all one long line.

or could it be a conflict with Attachments which also has thickbox and jquery?

[-Stash-]

OK, just so no one else gets confused by this (I'm not angry or shouting, I just want it to be crystal clear):

Attachments does NOT have jQuery and ThickBox.
InlineImages does NOT have jQuery and ThickBox.

InlineImages DOES use the JQuery and JQThickBox extensions IF you enable the option.

Regarding the jquery.js file being one long line, that is because I'm using the packed version - this is recommended by the jQuery people. Do not worry about this.

I've finally done what I should have in the first place, and that's check to see if you have the crrect version of jquery.js. It appears that this file isn't where it should be as when I go to http://www.jwurster.us/Vanilla.1/extensions/JQuery/jquery.js I get a 404 error. I suggest you solve this problem first as that is almost certainly why you are getting that JS error and the JQThickBox extension is not working as expected.

Still, it's nice to see that things degrade gracefully with the InlineImages extension when jQuery isn't there :)

jimw

I really appreciate your help with this. There was a thickbox and lightbox folder in the Attachments extension folder. I don't know how they got there, but I deleted them.

You will see the jquery.js file if you use "jQuery" as the folder name. Should it be "JQuery"?

[-Stash-]

There was a thickbox and lightbox folder in the Attachments extension folder.
These were form the 1.4.1 installation as they were integrated into those IIRC. They shouldn't have been interfering with anything, but it's better to get rid of them.

Yes, the folder name should be "JQuery". I believe the lack of capitalisation is what may be creating the issue here.

jimw

Well, I renamed the folder but am now getting errors. I guess I have to edit the settings file to correct.

Edit: Once I edited the extensions.php file to change the folder name, everything worked fine. See what a single character can do to you.