Update to Thickbox 3.1 / Firefox Bug on Mac
markusH - December 14, 2007 - 18:57
| Project: | Thickbox |
| Version: | 5.x-1.x-dev |
| Component: | Code |
| Category: | feature request |
| Priority: | normal |
| Assigned: | smk-ka |
| Status: | patch (code needs work) |
Description
I'm using thickbox to display all the media on my site. This means that beneath the images also flash videos and audio is displayed in a thickbox.
However, if you use a Firefox on a Mac, the flash content disappears. There seems to be a fix for this in thickbox 3.1 (problem discussed at http://jakeo.org/blog/2007/03/16/css-opacity-and-flash-transparency-in-m...)
After some struggle I found a quick way to patch the js / css files to solve my problem:
/* Insert at the end of the thickbox.js file */
function tb_detectMacXFF() {
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox')!=-1) {
return true;
}
}and in line 50:
if(tb_detectMacXFF()){
$("#TB_overlay").addClass("TB_overlayMacFFBGHack");//use png overlay so hide flash
}else{
$("#TB_overlay").addClass("TB_overlayBG");//use background and opacity
}and change the following in thickbox.css
/* OLD CODE */
#TB_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
height:100%;
width:100%;
}to
/* NEW CODE */
#TB_overlay {
position: fixed;
z-index:100;
top: 0px;
left: 0px;
/* background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75; */
height:100%;
width:100%;
}
.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {
background-color:#000;
filter:alpha(opacity=75);
-moz-opacity: 0.75;
opacity: 0.75;
}Works for me. Might be a niche problem, but anyway.
Cool module btw.
Cheers
Markus
#1
Thank you - I was having the same problem. With the current thickbox module, flash does not work in thickboxes on Mac Firefox.
I see in 5.x-1.x-dev you have thickbox.js updated to version 3. Could you update it to the newest thickbox version, 3.1? In 3.1 the workaround described above is applied to thickbox (mac firefox users are served a png background instead of relying on opacity in the overlay.)
I can submit a patch for the new thickbox version if you don't have time.
#2
I don't believe Thickbox 3.1 will work with the older version of jQuery that Drupal 5 ships with, or the version that comes with the jQuery update module. It was some time back I did the testing so please correct my if I'm wrong.
For Drupal 6 I will use Thickbox 3.1.
#3
Yeah, Thickbox 3.1 needs a recent jQuery, mainly for proper IE6 support. Nevertheless, for those that know how to install the jQuery Update module plus a recent jQuery 1.2.x (and know how tackle problems that may arise from the update), here's the patch to Thickbox 3.1 including Jake Olsen's Firefox 3 on Mac fix.
#4
Great !
Thanks and tracking !
I was looking for a solution to that problem, thx again
#5
Just a sidenote: jQuery Update 2.0 is in development, one new feature will be exposing the used jQuery version number to other Drupal modules. This will allow us to include multiple versions of the Thickbox JavaScript in the module, and dynamically select the right version that is known to be compatible with the currently installed jQuery version.
I will keep you updated and create a new patch when it's about time.