类型错误：$(...).Fancybox不是函数

Question

我想打开一个花哨的盒子，但是它给出了一个类型错误，你能帮我解决这个问题吗？

视图页面包含以下代码

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

HTML代码

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

我想在奇特的盒子里打开inline id div。

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

在Bootstrap中，我包含两个文件

$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();

在你的jQuery在一个页面中没有冲突可能是这个答案会对你有帮助。还有一件事是使用最高版本的javascript文件，比如只在jquery 1.3.min.js和jquery 1.3.5.min.js之间使用jquery 1.3.min.js。

Answer 2

“无冲突”技巧很有帮助。要使用作者现有的插件代码，您可以将其包装在生命周期中：

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

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

})(jQuery.noConflict());

我不得不为两个Wordpress插件这样做: Easy FancyBox和FancyBox for WordPress。我希望这能帮到你。