Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
Dave Willis
jQuery Thickbox? [resolved]
August 10, 2009 12:20 PM
Answer

Dave Willis

Rank: Expert

Posts: 301

Join Date: July 13, 2009

Recent Posts

I want to use Thickbox to display some images but it's not working. I included the file under docroot/js and the css under docroot/css. It's loading the files but it returns an error saying that $ is not a function. I realize that in Liferay the object is jQuery to avoid collisions but how can I make Thickbox work with that? Do I just need to open the file and do a find/replace on it? Surely there's a better way than that. Thanks!
-Dave
Dave Willis
RE: jQuery Thickbox?
August 10, 2009 9:53 AM
Answer

Dave Willis

Rank: Expert

Posts: 301

Join Date: July 13, 2009

Recent Posts

I tried using the non-compressed version and that didn't work either so I decided to wrap the whole thing in an anonymous function like (function($){ ... }(jQuery)); This is how I'm writing my jQuery scripts and it's working fine but now the stupid file won't update. I saved it and redeployed the portlet but my change is not being reflected in the file. So I cleared my cache, deleted work, temp and my portlet from tomcat, cleaned and redeployed my portlet and the old file is still being used. I even brought down tomcat, cleaned ext, rebuilt services and redeployed ext and then my portlet and it STILL uses the old file. It's driving me crazy. If I go to tomcat-6.0.18/webapps/my-portlet/js/thickbox.js and open that file I can see that it has the correct version of the file with the changes I made but the browser still uses the old one even after taking the previously mentioned steps. What is wrong with this thing?
-Dave
Dave Willis
RE: jQuery Thickbox?
August 10, 2009 10:11 AM
Answer

Dave Willis

Rank: Expert

Posts: 301

Join Date: July 13, 2009

Recent Posts

Well, I didn't know what else to do so I repeated those same steps a few more times and eventually it started using the correct file and it's working now... sort of. I no longer get the error and Thickbox loads but the images are ALL screwed up. See attached. They look normal when viewed through the Image Gallery portlet or when I link directly to the image though.
Attachment

Attachments: Picture 5.png (74.5k)
Dave Willis
RE: jQuery Thickbox?
August 10, 2009 12:20 PM
Answer

Dave Willis

Rank: Expert

Posts: 301

Join Date: July 13, 2009

Recent Posts

It turns out that because the images are a generated URL and don't end in a normal image extension like .jpg, Thickbox didn't know it was an image and was sending the wrong MIME type. You can fix the issue by modifying thickbox.js in the following way.

1       var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$|image_gallery/;
2       var urlType = baseURL.toLowerCase().match(urlString);
3
4        if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp' || urlType == 'image_gallery'){//code to show images


This code can be found starting on line 66.