Uncaught TypeError: $(...).fancybox is not a function

Question

HTML

<div class="test">
<a href="/example/123.html" class="fancybox"> link 1</a>
<a href="/example/123.html" class="fancybox"> link 1</a>
<a href="/example/123.html" class="fancybox"> link 1</a>
</div>

JQuery - updated

$('.fancybox').each(function(){
            $(this).fancybox({
                type: 'ajax',
                autoHeight: true,
                width: 930,
                autoSize: false,
                autoCenter: true,
                fitToView: false,
                topRatio: 0,
                arrows: false,
                closeBtn: true,
                closeClick: true,
                autoPlay: false,
                openSpeed: 1,
                closeSpeed: 'fast',
                closeClick: false,
                live: true,
                helpers: {
                    overlay: {
                        openSpeed: 'fast'
                    }
                }
            });
        });

Jsfiddle demo

Attempted with only

$('.fancybox').fancybox();

The first clicked link will open fancybox. Then the next clicked link will not open fancybox and just show blank overlay.

Noticed that if with parent.location.reload(true);, it worked by refreshing whole page and then show fancybox. That is not what I wanted. It should work every time click on different links and show fancybox without refresh.

Thought with ajax that it could get href to process and then show fancybox but it does not work :(

Another thing is that Fancybox seemed to be initialized more than once. How to prevent it from being initialized more than once?

Got error: `Uncaught TypeError: $(...).fancybox is not a function

Is there any way to make fancybox work without having to refresh page everytime click on link?

Updated

I edited the code above and it is still giving me trouble.

Answer 1

I think your problem here is that you are processing multiple ajax requests.

Fancybox supports ajax simply by using :

$("#various3").fancybox({
        ajax : {
            type    : "POST",
            data    : 'mydata=test'
        }
    });

and it views within it the results of the processed file in the href attribute called via AJAX.

So in your code, you do not need to process a jquery ajax and within it call the fancybox. Rather, you can call the fancybox in ajax mode and this shall do you the trick.

You can check the Official FancyBox Site for processing AJAX with it.

As for the initialization, this really depends on your fancybox js script loading. The fancybox javascript file shall be loaded once in your page.

Using $(element).fancybox({}) on html elements more than once does not re-initialize the current object within the element, but it resets it with the new call. In other words, the fancybox object is overridden in the element.

Updated :

Here is a working copy, just use the $.fancybox({}) on link click, prevent the default event behavior and set your desired location as the href element itself, make sure you only import jquery once so that you wont override it :

<!-- Add jQuery library -->
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>


<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />

<div class="test">
<a href="/example/123.html" class="fancybox_ajax"> link 1</a>
<a href="/example/123.html" class="fancybox_ajax"> link 2</a>
<a href="/example/1236.html" class="fancybox_ajax"> link 3</a>
</div>

<script type="text/javascript">
        $(document).ready(function() {
    $('.fancybox_ajax').on('click', function(e){
                    e.preventDefault();

                    $.fancybox({
                        width: 400,
                        height: 400,
                        autoSize: false,
                        href: $(this).attr("href"),
                        type: 'ajax'
                    });
                });

});
    </script>

Last Update - Fixing jquery conflict issue

I got this to work by setting a new alias to the jquery library, the $ seem to conflict with another javascript library loaded afterward and it is not finding the fancybox plugin.. newFiddle