[英]Fancybox won't work
似乎无法让Fancybox工作 - 它只是链接到第一张照片。 我得到错误:未捕获的typeerror对象#一个对象没有方法'fancybox'。
HTML
<a class="fancybox" data-thumbnail="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/imagecache/timeout_slideshow_player_thumbnail/P1010923.JPG" href="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/imagecache/timeout_492x330/P1010923.JPG"><img alt="" src="http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/toclogo.jpg"></a>
<br />
<a class="fancybox" data-thumbnail="http://fancyapps.com/fancybox/demo/2_s.jpg" href="http://fancyapps.com/fancybox/demo/2_b.jpg"></a>
使用Javascript
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").attr('rel', 'gallery').fancybox({
helpers: {
thumbs: {
width: 40,
height: 40,
source: function(current) {
return $(current.element).data('thumbnail');
}
}
}
});
});
</script>
头
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.3"></script>
根据Chrome开发者工具中的Source,它似乎确实在拉入外部文件。
谢谢
嗯。 看起来jquery加载了两次。 一次
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
和另一个(更难找到)
http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/advagg_js/js_13ec2e29dba08b369ccfdde54d836ec0_8.js
看起来你正在使用drupal并使用一些谷歌搜索,听起来它为你注入了一个jquery版本(jQuery JavaScript Library v1.3.2)
发生错误的原因是两个库之间的冲突。 请尝试关注此更新http://drupal.org/project/jquery_update
你正在使用两个版本的jQuery。
当您从控制台执行jQuery(".fancybox").jquery
,您将获得1.3.2
。 毫无疑问,这与fancybox不兼容。
jQuery 1.8.2通过Google CDN加载了您的显式script
标记请求。
jQuery 1.3.2是作为http://staging.timeoutchicago.com/sites/timeoutchicago.com/files/advagg_js/js_13ec2e29dba08b369ccfdde54d836ec0_8.js
一部分加载的,它来自Drupal为自己的目的注入此库。
为了将来参考,我能够使用Chrome开发者工具找到这个文件,按文件大小排序(最大的第一个),然后查看JS文件......之后很快发现它。
我遇到了同样的问题,我通过更改行中的双引号来解决它:
$(".fancybox").fancybox();
单引号:
$('.fancybox').fancybox();
由于fancyBox网站有双引号,因此排序为'gotcha'。
如果有什么不起作用:
parent.window.document.getElementById("fancybox-wrap").style.display = 'none';
这个隐藏的fancybox。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.