Search code examples
jqueryfirefoxfancyboxfancybox-2

Fancybox 2 not working in Firefox 22.0


I've been trying to get Fancybox 2 to work with Firefox 22.0, however to no avail. I ran this with chrome, which turned out fine. I've downgraded the jQuery version, put https on the link, ran it through Firebug, nothing worked. Any ideas?

Javascript:

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<script src="fancybox/jquery.fancybox.js?v=2.1.5"></script>
<script>
$(".fancybox").fancybox({
                openEffect  : 'none',
                closeEffect : 'none',
                afterClose    : function() {        
                    slideMove = true;                                  
                },
                beforeLoad : function() {
                    event.preventDefault(); 
                    slideMove = false;

                }
            });
</script>

HTML:

<a class="fancybox" href="images/screenshots/flower-big.jpg" title="The Cupertino Florist"><img src="images/screenshots/flower-small.jpg" alt=""></a>

Website: http://andrewgu12.kodingen.com/#portfolio


Solution

  • Your javascript should rather look like :

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
    <script src="fancybox/jquery.fancybox.js?v=2.1.5"></script>
    <script>
    $(document).ready(function (){
        $(".fancybox").fancybox({
            openEffect: 'none',
            closeEffect: 'none',
            afterClose: function () {
                slideMove = true;
            },
            beforeLoad: function () {
                event.preventDefault(); //<--- this is breaking your code in Firefox
                slideMove = false;
            }
        });
    });
    </script>
    

    ... assuming that you have an HTML5 DOCTYPE, otherwise add type="text/javascript" attribute to your script tags

    EDIT : Well, it's not Firefox 22, I overlooked some lines in your code : event.preventDefault(); inside the beforeLoad callback is breaking your code in Firefox. This JSFIDDLE doesn't work and THIS works if commented out.