CODEWITHSUNDEEP
javascriptjquerycssinternet-explorerfancybox
Learning
Learning

Reputation: 20001

fancybox-1.3.4 doesn't work in iE8

I have following sample of code i want to open video in a fancybox it works fine almost across all browsers except when i try to test it in IE 8 standard mode.

It works fine in IE 9 and above.

Based on this solution i added following line of code but this doesn't make it work either iframe: { preload: false }

HTML Deceleration code is as

<!DOCTYPE html >
    <html lang="en">
    <head id="Head1" runat="server">
    <title></title>
    .........

Sample Code

<div class="video-icon">
  <a href="http://www.youtube.com/embed/CR0AXNtwqZE?autoplay=1" class="fancybox-video"><img src="coorporate-video-icon.jpg"/></a>
</div>


             $("a.fancybox-video").fancybox({
                width: 600,
                height: 440,
                closeClick: true,
                hideOnOverlayClick: true,
                type: 'iframe',
                iframe: { preload: false // fixes issue with iframe and IE
                }
            });

I am not sure what breaks it i cant create a fiddle example as fiddle doesn't work in IE 8 any help in this regard is appreciated.

UPDATE: i tried it with fancybox Version 2.1.3 but i still face the same problem..

Upvotes: 0

Views: 2116

Answers (1)

JFK
JFK

Reputation: 41143

it doesn't work doesn't really tell what the problem is.

If it didn't even work with v2.1.3, then you may have other issues. This is your check list for troubleshooting IE:

  • Make sure you have a proper DOCTYPE, and the DOCTYPE is the first line of your html document so IE won't switch to quirks mode.

  • Make sure you are wrapping your custom script inside the .ready() method.

  • Make sure you are using the right fancybox options

  • Make sure you don't have any extra trialing comma after the last option

  • Check for other script conflicts (syntax errors of other scripts may stop fancybox from working)

  • Make sure you don't have any other js error. Check IE isn't showing this icon (bottom-left corner of the browser) :

    enter image description here

Otherwise, this html

<a href="http://www.youtube.com/embed/CR0AXNtwqZE?autoplay=1" class="fancybox-video"><img src="coorporate-video-icon.jpg"/></a>

and this jQuery code, both work fine in IE[7-9] using fancybox v1.3.4 :

jQuery(document).ready(function ($) {
    $("a.fancybox-video").fancybox({
        width: 600,
        height: 440,
        hideOnContentClick: true, // closeClick: true, // this for v2.x
        hideOnOverlayClick: true,
        type: 'iframe'
    });
}); // ready

See DEMO at http://www.picssel.com/playground/jquery/youtubeEmbedIframe_07jan14.html

Upvotes: 1

Related Questions