0

As per title, adding the below to remove background on Fancybox 2.1.4 works fine on Safari, FF & Chrome but not IEs. (only tested on IE8)

beforeShow: function(){
    //transparent background
    $(".fancybox-skin").css("background","transparent");

    //remove dropshadow
    $(".fancybox-skin").css("-webkit-box-shadow","0 0 0 rgba(0, 0, 0, 0)");
    $(".fancybox-skin").css("-moz-box-shadow","0 0 0 rgba(0, 0, 0, 0)");
    $(".fancybox-skin").css("box-shadow","0 0 0 rgba(0, 0, 0, 0)");
}
Jin
  • 39
  • 1
  • 5
  • rgba colors are not supported in IE8. For solution please read [CSS background opacity with rgba not working in IE 8](http://stackoverflow.com/q/3975688/1693859) – Sam R. May 10 '13 at 13:48
  • Which version of Internet Explorer are you having issues with? Features like `rgba` and `box-shadow` aren't supported natively in older versions. – Sampson May 10 '13 at 14:21
  • The rbga is to remove the drop shadow, not the background color. – Jin May 10 '13 at 14:23
  • Solution found after trying diff. settings, stackoverflow doesn't allow me to post the answer in 6 hours, will post details after that. Problem lies at the iframe attribute: must be set to allowtransparency="true". – Jin May 10 '13 at 14:27

1 Answers1

0

After digging around the Fancybox's src files, the problem is at the iframe "allowtransparency" attribute.

In jquery.fancybox.js line 140, replace the line with below:

iframe   : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen allowtransparency="true"></iframe>',
Jin
  • 39
  • 1
  • 5