Extension: JQThickBox

Stash · January 2007

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 · January 2007

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 · January 2007

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 · January 2007

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 · January 2007

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 · January 2007

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 · January 2007

Np Stash. Also add that configuration check in your JQuery

Stash · January 2007

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

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 · January 2007

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 · January 2007

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 · January 2007

Use WEB_ROOT instead of APPLICATION_PATH

Stash · January 2007

Thanks Jazzman, much appreciated.

JQThickBox 1.0.1 released!

Stash · January 2007

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 · January 2007

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

Stash · January 2007

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

jimw · February 2007

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 · February 2007

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 · February 2007

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 · February 2007

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

Stash · February 2007

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 · February 2007

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.

Extension: JQThickBox

Comments