I am using thickbox on ubercart/drupal 6 on ubuntu. The problem is I moved the site from a windows machine to ubuntu. All problems with paths and permissions sorted and site is working well. The only problem I'm having now is when I click on a product image, thickbox is supposed to show a preview pop up. Instead, it shows weird characters in the pop up window. A copy/paste of those characters:
�����JFIF�,,�����Exif��MM����� ���������������������������������������(�������1��������2����������������i����������4NIKON CORPORATION�NIKON D70s���,�����,���Adobe Photoshop 7.0�2008:08:21 17:13:50���%�������������������"�������������0221���������������������������֒� �����ޒ������������������������ �������� ����������,�������90��������90��������90��������0100��������������������������������������������������������"���������������������������������������E������������������������������ ��������� ����������������������� ��X������� 2008:08:19 15:40:17�2008:08:19 15:40:17�����������������+��� ������ ASCII��� ���������������������������������(�������������������� W�������H������H��������JFIF��H�H�����Adobe_CM����Adobe�d��������� ������7"�������?���������� ��������� �3�!1AQa . . . . . . and a lot more similar chars
The images are uploaded properly and I can see them under sites/default/files/. Even the thumbnails are generated. These thumbnails appear on the site as well. Also right clicking a thumbnail and open in new tab shows me the whole image properly.
Also, Thickbox sends an ajax GET request for the image to a URL that looks something like this:
http://127.0.0.1/elegancia/?q=system/files/imagecache/product_full/image_1.jpg&random=1299550719133
Copy pasting the same request from firebug into a new browser tab opens the image successfully.
From firebug, these are the request response headers for the ajax request:
Response Headers
view source
Date Tue, 08 Mar 2011 02:18:39 GMT
Server Apache/2.2.16 (Ubuntu)
X-Powered-By PHP/5.3.3-1ubuntu9.3
Expires Tue, 22 Mar 2011 02:18:39 GMT
Last-Modified Tue, 08 Mar 2011 01:21:47 GMT
Cache-Control max-age=1209600, private, must-revalidate
Content-Length 111831
Etag "4dfe0f3d345781ac89aae5c2a10361ad"
Keep-Alive timeout=15, max=92
Connection Keep-Alive
Content-Type image/jpeg
Request Headers
view source
Host 127.0.0.1
User-Agent Mozilla/5.0 (X11; U; Linux i686; en-GB; rv:1.9.2.15) Gecko/20110303 Ubuntu/10.10 (maverick) Firefox/3.6.15
Accept text/html, */*
Accept-Language en-gb,en;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive 115
Connection keep-alive
X-Requested-With XMLHttpRequest
Referer http://127.0.0.1/elegancia/
Cookie SESS7a3e11dd748683d65ee6f3c6a918aa02=bijhrr4tl66t42majfs3702a06; has_js=1
Looks like it was a thickbox (Javascript) issue. PHP and Apache work fine when it comes to recognizing the image using mime.
If there are arguments in the image URL, eg. (http://127.0.0.1/elegancia/?q=system/files/imagecache/product_full/image_1.jpg&random=1299550719133) - causes Thickbox to show nonsense characters instead due to thickbox image recognition algorithm. URLs not ending with an image extension makes the thickbox javascript to treat the image like another mime type that is not an image.
To work around, one needs to modify line 53 of /modules/thickbox/thinkbox.js, by adding " || urlType == '/preview' " to the list of choices in order to make thickbox.js believe in its heart that a Drupal-encoded image link is in fact an image and not an imposter.
Assuming your image size is "preview," change line 53 from:
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp' ){//code to show images
to this:
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp' || urlType == '/preview'){//code to show images
Also, modify line 50 to this:
var urlString = /\.jpg|\.jpeg|\.png|\.gif|\.bmp|\/preview/g;
(substitute "/preview" for "/thumbnail," "/quarter," or whatever you configured your image module to create (and name) various sizes.