Using Bootstrap & Fancybox in a single project

Question

I am using Bootstrap and Fancybox within a single project, including it like this:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>

The files exist and got included by Chrome.

When creating a Fancybox element:

$(document).ready(function() {
    [...]

    jQuery("a.fancy").fancybox({
        'transitionIn'  : 'none',
        'transitionOut' : 'none'    
    });
});

JS throws an error:

Uncaught TypeError: Cannot read property 'msie' of undefined jquery.fancybox-1.3.4.pack.js:18
Uncaught TypeError: Object [object Object] has no method 'fancybox'

(bootstrap functions are working)

Is this a namespace problem?

possible duplicate of [Fancybox doesn't work with jQuery v1.9.0](http://stackoverflow.com/questions/14344289/fancybox-doesnt-work-with-jquery-v1-9-0) — JFK, Jan 16 '13 at 00:28
you are using `http://code.jquery.com/jquery-latest.js` so check http://stackoverflow.com/q/14344289/1055987 — JFK, Jan 16 '13 at 00:29

score 2 · Answer 1 · answered Jan 15 '13 at 23:29

2

Is DOM loaded before fancybox got called? If not try this:

$(document).ready(function() {
    $('a.fancy').fancybox({
        'transitionIn'  : 'none',
        'transitionOut' : 'none'
    });
});

answered Jan 15 '13 at 23:29

Ahmet Aygun

612
6
19

score 0 · Answer 2 · edited Mar 18 '13 at 19:33

0

I just got this by bundle update.

looks like the most recent version of jQuery no longer supports ($.browser). The jQuery docs recommend using Modernizr

I used this and it worked well.

jQuery 1.9 docs

edited Mar 18 '13 at 19:33

Ben Swinburne

25,669
10
69
108

answered Mar 18 '13 at 17:52

ajbraus

2,909
3
31
45

Using Bootstrap & Fancybox in a single project

2 Answers2