Using Bootstrap & Fancybox in a single project

GregorVolkmann picture GregorVolkmann · Jan 16, 2013 · Viewed 7.9k times · Source

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?

Answer

Ahmet Aygun picture Ahmet Aygun · Jan 16, 2013

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

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