我不断收到此“ TypeError:jQuery.fancybox未定义;每次单击带有fancybox jQuery插件的缩略图时都无法访问其“ jumpto”属性的错误。我试图解决jQuery冲突。我还做了一个基本测试,以验证是否存在“ Fancybox”。根据此测试,它是。我不知道发生了什么。
这是我的代码:
<a class="fancybox" href="http://farm6.staticflickr.com/5444/17679973232_568353a624_b.jpg"><img src="http://farm6.staticflickr.com/5444/17679973232_568353a624_m.jpg" alt=""/></a>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript">
var jq = $.noConflict();
jq(document).ready(function() {
jq(".fancybox").click(function() {
if(jq.fancybox) {
alert("yes");
} else {
alert("no");
}
jq.fancybox.open([
{
href : 'http://farm6.staticflickr.com/5444/17679973232_568353a624_b.jpg',
title : '1st title'
},
{
href : 'http://farm6.staticflickr.com/5444/17679973232_568353a624_b.jpg',
title : '2nd title'
},
{
href : 'http://farm6.staticflickr.com/5444/17679973232_568353a624_b.jpg',
title : '3rd title'
}
], {
nextEffect : 'none',
prevEffect : 'none',
padding : 0,
helpers : {
title : {
type: 'over'
},
thumbs : {
width : 75,
height : 50,
source : function( item ) {
return item.href.replace('_b.jpg', '_s.jpg');
}
}
}
});
return false;
});
});
</script>