Thickbox and Drupal urls deliver wrong mime type with image module urls
| Project: | Thickbox |
| Version: | 5.x-1.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | critical |
| Assigned: | Unassigned |
| Status: | won't fix |
In the Thickbox module, the main *.js file, thickbox.js does not account for image urls created in drupal, e.g. via /image/view/2321/preview instead of /image.jpg (or *gif or *png). If thickbox.js does not see the file name itself (gif, jpg, png, jpeg) in the link anchor tag (the [a href ...] tag), it will treat the image like another mime type that is not an image. This causes Thickbox to spit out God-awful garbage on top of your page instead of a cool shadowbox (lightbox) effect.
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 imagesto this:
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp' || urlType == '/preview'){//code to show imagesAlso, 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.
Joe Hyde
#1
#2
I have that same error, but am not able to fix it using the suggested work-around.
I use this code in one of my nodes:
<a href="/image/view/816/preview" class="thickbox"><img src="/image/view/816/thumbnail"/>
</a>
An have altered /modules/thickbox/thickbox.js line 50:
var urlString = /\.jpg|\.jpeg|\.png|\.gif|\.bmp|\/preview/g;And have altered that same file line 53:
if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp' || urlType == '/preview'){//code to show imagesThis does not solve the problem for me, although the symptoms are the same; it does dim the site, but prints garbage at the bottom of the page.
Attached you will find a screenshot of what I see; the top is the grayed area, and the bottom it the garbage.
#3
My problems are solved after flushing the browser cache. So, this workaround does work.
#4
While the workaround is a solution for individual users, countless other users will be put off by it and go to other solutions. Therefore I am marking this as a critical bug and I hope the workaround will be built into a new release as soon as humanly possible.
#5