1

I'm using Fancybox in a bought multipurpose template called YALU. However Fancybox iframes doesn't work in IE 8. The overlay opens, but no content is loaded (white content). I also tried to disable the preload function in fancybox with no effect.

All other browsers (Firefox, Chrome, even IE 9) are working good. You can have a look here(click the first sample image).

I've been looking for a solution for days now, but haven't found any yet.

Here is some source code from the Template:

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en-US"> <!--<![endif]-->
<head>
[...]

This is part of the jquery script:

jQuery(window).load(function($) {
if(jQuery().fancybox) {
    jQuery('.openfancybox').fancybox();
} 
[...]

This is my a-Tag:

<a data-fancybox-type="iframe" href="404.html" class="openfancybox fancybox.iframe">...</a>

Can anyone help?

Thanks in advance Jan

DontVoteMeDown
  • 21,122
  • 10
  • 69
  • 105
Jan Melcher
  • 31
  • 1
  • 3

2 Answers2

2

I solved this problem

This has been caused by a wrong css declaration for the html-tag which has been set to position:relative

Changing into absolute solved it for IE8. In fact I don'r really understand this, but it works and thats all I wanted.

Thanks for your help

Jan Melcher
  • 31
  • 1
  • 3
  • Personally, I never like setting position or dimensions (`width` and `height`) to neither the `html` or `body` tags but using wrapper containers instead, otherwise potentially creates lots of conflicts with many plugins. – JFK Jul 25 '13 at 15:46
0

Try disabling iframe preload in your your code like :

if (jQuery().fancybox) {
    jQuery('.openfancybox').fancybox({
        iframe: {
            preload: false // fixes possible issues with iframes and IE
        }
    });
}

Check this for further reference.

EDIT #1 :

I don't think is a fancybox releated issue. There is something in your page (a script perhaps) that prevents it from being displayed inside an iframe using IE.

Check this http://jsfiddle.net/mgENw/show/ in IE.

Also, your main page trows this error (IE) on page load : enter image description here

Community
  • 1
  • 1
JFK
  • 40,963
  • 31
  • 133
  • 306
  • Hi JFK, thanks for your answer. I already tried setting preload to false - with no effect. In fact your jsfiddle-link doesn't open my 404.html page in IE8 I think it really maybe any other jSqript from the YALU Template which knocks out the fancybox.iframe functionallity. Jan – Jan Melcher Jul 25 '13 at 08:55