Fancybox :TypeError: $(…).Fancybox is not a functi

Question

I want to open a fancy box, But it give a Type error, can you please help me to solve this problem

view page contain following code

<script type="text/java script">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script>

HTML code

<a class="fancybox" href="#inline1" title="Add New Vessel">
    <div class="right-head-buton" style="color:#fff">Add New Vessel</div>
    </a>

I want to open inline id div in fancy box

<div id="inline1" style="width:800px;display: none;">
    <div class="lightbox">
    <?php echo $this->action('add', 'agency', NULL); ?>
    </div>
    </div>

In Bootstrap I include two files

$view->headScript()->appendFile($view->baseUrl('/public/js/jquery-1.10.1.min.js'));
$view->headScript()->appendFile($view->baseUrl('/public/js/jquery.fancybox.js?v=2.1.5'));

Answer 1

<script type="text/javascript">
var $= jQuery.noConflict();

noconflict in your jQuery in a single page may be this answer will help you. and one more thing use highest version of a javascript file like only use jquery 1.3.min.js between jquery 1.3.min.js and jquery 1.3.5.min.js

Answer 2

The "no conflict" trick helps. To use an author's existing plugin code, you can wrap it in an IIFE:

// IIFE passing in jQuery.noConflict()
(function(jQuery){

     // Original author's plugin code
     // ...
     jQuery("a.fancybox").fancybox({ ... }
     // ...

})(jQuery.noConflict());

I've had to do this for two WordPress plugins to get them working with Firefox: Easy FancyBox and FancyBox for Wordpress. I hope this helps.