Anyone familiar with getting JQuery plugins to work?

Jan 20, 2009 at 11:16 PM
Edited Jan 20, 2009 at 11:31 PM
I was trying to install thickbox (lightbox clone made with JQuery), but I am running into all sorts of conflicts with I have tried the following:

In my themes site.master page I have added:

    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript">
        $j = jQuery.noConflict();   
    <script type="text/javascript" src="/plugins/thickbox/thickbox.js"></script>

I have renamed all of the $ to $j in the thickbox.js file, but it doesn't make any difference.

Q. When I click on viewsource, the scripts above appear above the blog.js one. I'm not sure if that is how it is supposed to be or not.
A.  Makes no difference

 Any have any ideas or experience with JQuery plugins? Nothing seems to work...

Jan 21, 2009 at 12:34 AM
I added the script tags you have in your post to my site.master file and put the jquery.js and thickbox.js files on my site.  In thickbox.js, I replaced $( with $j(  ... there were 62 occurrences to replace.  After that, my blog seems to load fine.  No errors that I can see.  I didn't try doing anything with thickbox though since I never used it before.  The thickbox.js file I downloaded was from here.

What types of errors are you seeing?  When and where do they happen?
Jan 21, 2009 at 12:38 AM
A strange thing I have noticed is that when I use IE 7 and debug the error with visual studio, it loads up the thickbox.js file without the $j constructor thing.
Jan 21, 2009 at 12:47 AM
You mean the thickbox.js file that shows in VS when debugging has $( instead of $j(  ?

Do you still have a copy of thickbox.js with $( somewhere?  Maybe IE7 has cached an old version?
Jan 21, 2009 at 12:48 AM
Well that strange IE javascript error isn't coming up anymore, must of been a caching error - though it was very persistent. I have run into a different problem it seems when I reference images from posts using the image.axd handler it loads up a bunch of weird characters instead of the image.

Example image
<a href="/image.axd?picture=2008%2f12%2fsome-image.png" title="woot" class="thickbox">
<img src="/image.axd?picture=2008%2f12%2fsome-image.png" alt="Single Image"/>

Jan 21, 2009 at 12:52 AM
Weird characters ... you mean %2f?  Those are probably normal, I have them too.  They are just encoded backslashes.  The decoded version of that first hyperlink is:

<a href="/image.axd?picture=2008\12\some-image.png" title="woot" class="thickbox">

That would be referencing a file named some-image.png under App_Data\Files\2008\12\.
Jan 21, 2009 at 12:57 AM
More like wingding style characters where the image is supposed to be displayed. A big block of them.
Jan 21, 2009 at 1:01 AM
I think I've seen that type of thing when a server side error occurs.  The error is probably occurring in the image.axd handler if the characters are showing up where the image would normally be.  You could try taking the Url to the image when viewing the html source (e.g. http://yoursite/image.axd?picture=...) and put that url directly in the browser's address bar.  That *might* give you some error information.
Jan 21, 2009 at 1:05 AM
Ya, it is definitely something screwy with the image.axd handler, because the plug in works fine if I use an image in the root and reference it like a normal file.
Jan 21, 2009 at 1:09 AM
So it could be that thickbox is taking the Url and loading the image, or getting the image ready for presentation, and it's maybe loading the wrong path or making an incorrect assumption about the path.  Do you have your blog in a subfolder?  Thickbox could be trying something like /image.axd when it should be /blog/image.axd or something along those lines.  Just guessing.
Jan 21, 2009 at 1:11 AM
No, my blog is my site.
Jan 21, 2009 at 1:14 AM
If you have Firebug or Fiddler, I'd try checking to see if there are any bad requests being made.  You might find 404 or 500 errors for requests thickbox is making.  Could help diagnose the problem...
Jan 21, 2009 at 1:20 AM
I'm stepping through with firebug and it seems to get the whole path. Strange... this could take awhile to get working. Thanks for the help Ben, i'll post back if I get anywhere.
Jan 21, 2009 at 1:24 AM
Edited Jan 21, 2009 at 1:26 AM
Ok, I found something, The urltype is null so it skips a huge chunk of code. The baseurl is and it uses that string to search for the extension which is in the querystring. To sum it up, the thickbox.js doesn't check the querystring for the extension, so it never finds one. I will try and fix this when I get back.

In the thickbox.js file line 65
var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;
var urlType = baseURL.toLowerCase().match(urlString);
  if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images

Jan 21, 2009 at 1:41 AM
Oh yeah, that does look like the problem.  It doesn't look like baseURL is used again after the urlType check.  I think on line 58, baseUrl can just be declared as var baseURL = url;  And then the IF block on lines 59 thru 63 can be commented out.