0

我一直在尝试让 fancybox 在这个免费模板中工作，昨天一个好人在 reddit 上赠送了这个模板，但我运气不佳。我在 HTML/CSS 方面表现不错，但在 Jquery 方面不太出色。如果有人能指出我正确的方向，我将不胜感激。我正试图让投资组合图像在花式框中弹出。 http://jsfiddle.net/yz93H/1/ 在此先感谢您的帮助。

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


   <figure class="entry web"> 
                <a class="fancybox" href="img/portfolio-image.jpg"><img src="img/portfolio-image.jpg" alt=""></a>
            </figure>
4

1 回答 1

1

由于所有相对路径，您发布的 jsfiddle 有点难以使用，但我注意到的一件事是您没有将 Fancybox javascript 链接到您的文档中。

应该有类似的东西：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>`
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>`

希望这会解决它。

编辑：对不起，在文档末尾错过了您的 js。再看一遍，我发现了你的问题。您发布的代码段应该在jQuery 加载之后出现。由于您的 jQuery 仅在文档​​末尾加载，因此您的代码正在抛出Object #<HTMLDocument> has no method 'ready'.

我用你发布的工作版本创建了一个新的小提琴。一切都从 CDN 加载，我使用 Twitter 的徽标作为展示：http: //jsfiddle.net/tiagoespinha/yz93H/4/

本质上，你唯一需要的改变就是把这个

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

在 jQuery 的脚本标签之后。

于 2012-11-09T15:30:16.620 回答