Fancybox not working with jQuery tabs

Question

I have Fancybox working on my site, example here, scroll down to Ocean Exploration Photo Gallery:

http://www.sea.edu/academics/oe

I've added jQuery tabs to a testing version of the page, got that working, but now the FancyBox within one of the tabs isn't working. The clicked image opens up in a new window. I'm guessing the FancyBox function isn't getting activated in the tab, but can't figure out how to fix it. See example of non-working page, with the gallery in the Photo Gallery tab:

http://www.sea.edu/academics/oe_testing

Here is the function that works on other pages:

<script type="text/javascript">
    $(document).ready(function() {
    $("a[rel=fancygallery]").fancybox({
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'titlePosition'     : 'over',
            'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
            }
        });

    });
</script>

I've changed the "_testing" page to remove references to different versions of the jQuery library, which didn't fix the problem. After some searching around, I tried changing to this, still no luck:

 <script type="text/javascript">
    $("#OEtabs-3").each(function() {
    $("a[rel=fancygallery]").fancybox({
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'titlePosition'     : 'over',
            'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
                return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
            }
        });

    });
</script>

Any advice greatly appreciated!

Can you provide a [jsfiddle example](http://jsfiddle.net)? – Dom Apr 30 '13 at 18:28 — Dom, Apr 30 '13 at 18:28

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

You have a problem with the deprecated jQuery.browser msie property which is used by fancybox 1.3.4 (see also Error jquery-ui draggable Cannot read property 'msie') So you have to downgrade to jQuery 1.8.3 or better use the new fancybox 2 (but be aware of the noncommercial licence here).

See small demo with jQuery 1.8.3 and fancybox 1.3.4 here: http://jsfiddle.net/JUtz2/ and the version with jQuery 1.9.1 and fancybox 2.1.4 here: http://jsfiddle.net/M9jUm/1/

edited May 23 '17 at 11:57

Community

1
1

answered Apr 30 '13 at 18:56

orzechow

1,210
2
13
18

@Lauren : more about the issue here http://stackoverflow.com/q/14344289/1055987 the post includes possible workarounds and/or the fancybox v1.3.4 patched file that works with jQuery v1.9+ – JFK Apr 30 '13 at 21:03

Fancybox not working with jQuery tabs

1 Answers1