Geek asks and answers

Fancybox: TypeError: $ (...). Fancybox is not a function

I want to open a fancy box, but it gives a type error, could you help me solve this problem.

The watch page contains the 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 the 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'));
+3
source share
2 answers
<script type="text/javascript">
var $= jQuery.noConflict();

noconflict in jQuery on one page maybe this answer will help you. and one more thing uses the highest version of javascript file as soon as use jquery 1.3.min.js between jquery 1.3.min.js and jquery 1.3.5.min.js

+8
source

A "conflict-free" trick helps. To use the existing plugin code, you can wrap it in IIFE:

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

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

})(jQuery.noConflict());

WordPress, Firefox: Easy FancyBox FancyBox Wordpress. , .

0

More articles:


All Articles