3

似乎无法让 Fancybox 工作 - 它只是链接到第一张图片。我得到错误：未捕获的类型错误对象#一个对象没有方法'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 开发者工具中的源代码，它似乎确实在拉入外部文件。

谢谢

4

4 回答 4

4

嗯。看起来 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

于 2013-01-04T19:46:02.330 回答
2

您正在引入两个版本的 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 文件......之后很快就找到了。

于 2013-01-04T19:45:43.243 回答
0

我遇到了同样的问题，我通过更改该行中的双引号来解决它：

$(".fancybox").fancybox();

单引号：

$('.fancybox').fancybox();

有点“陷阱”，因为 fancyBox 网站有双引号。

于 2015-01-27T20:20:56.487 回答
-1

如果有什么不起作用：

 parent.window.document.getElementById("fancybox-wrap").style.display = 'none';

这个隐藏的fancybox。

于 2014-11-24T08:41:30.873 回答