花式盒子方法根本不起作用

Question

我真的很困惑，我真的按照这里的指示进行操作。

编码在这里

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script> !window.jQuery && document.write('<script src="assets/scripts/fancybox/jquery-1.4.3.min.js"></script>'); </script>
<script type="text/javascript" src="assets/scripts/fancybox/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="assets/scripts/fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="assets/scripts/fancybox/fancybox/jquery.fancybox-1.3.4.css" media="screen" />

我的网页

                <p class="gallery-photo"> <a rel="gallery_group" href="photo2.jpg" title=""><img alt="" src="photo2.jpg" /></a> </p>
                <p class="gallery-photo"> <a rel="gallery_group" href="photo3.jpg" title=""><img alt="" src="photo3.jpg" /></a> </p>
                <p class="gallery-photo"> <a rel="gallery_group" href="photo4.jpg" title=""><img alt="" src="photo4.jpg" /></a> </p>

脚本

<script type="text/javascript">
    $(document).ready(function() {
        $("a[rel=gallery_group]").fancybox({
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'titlePosition'     : 'over',
            'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
            return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
            }
        });
    });
</script>

问题是在我单击图像后，它不会出现像花哨的盒子。我找不到任何错误的代码。有什么想法吗？

Answer 1

你几乎可以肯定在某个地方遇到了一个JavaScript错误，它阻止了Fancybox初始化。

若要进行测试，请重新加载页面，然后单击图像以查看它是否在控制台窗口中触发任何错误。 如果您没有，请获取Firebug并重新加载页面。