FancyBox 代码问题答案

【问题标题】：FancyBox code issueFancyBox 代码问题
【发布时间】：2013-10-04 08:59:56
【问题描述】：

我从这里下载了 fancyBox：

这是我在“测试”网页中的代码：

<!DOCTYPE html>
<html lang="en">
    <head>  
        <title>fancyBox</title>
        <meta charset="utf-8">

        <!-- Add jQuery library -->
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">

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

        <!-- Add fancyBox main JS and CSS files -->
        <script type="text/javascript" src="source/jquery.fancybox.js"></script>
        <link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css" media="screen" />

        <!-- Add Button helper (this is optional) -->
        <link rel="stylesheet" href="source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
        <script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js"></script>
        <link rel="stylesheet" type="text/css" href="source/helpers/jquery.fancybox-buttons.css" />
        <script type="text/javascript" src="source/helpers/jquery.fancybox-buttons.js"></script>

        <!-- Add Media helper (this is optional) -->
        <script type="text/javascript">
        $(document).ready(function() {
            /*
                *  Simple image gallery. Uses default settings
            */

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

                /*  Different effects */

                // Change title type, overlay closing speed

            /*  Button helper. Disable animations, hide close button, change title type and content */

            $('.fancybox-buttons').fancybox({
                openEffect  : 'none',
                closeEffect : 'none',
                prevEffect : 'none',
                nextEffect : 'none',
                closeBtn  : false,
                helpers : {
                    title : {
                        type : 'inside'
                    },
                    buttons : {}
                },
                afterLoad : function() {
                    this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
                }
            });

        </script>
        <style type="text/css">
            .fancybox-custom .fancybox-skin {
                box-shadow: 0 0 50px #222;
            }
            body {
                max-width: 700px;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <h3>Button helper</h3>
        <p>
            <a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>
            <a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>
            <a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>
            <a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>
        </p>
    </body>

</html>

我认为我的服务器上有正确的路径，但这是我看到的：

http://www.bayingwolf.com/site_pop_up/image_pop.html

而不是他们网站上的 fancyBox（在 Button Helper 下）。

请问我做错了什么？

谢谢。

蓝色

【问题讨论】：

标签： javascript fancybox

【解决方案1】：

我收到了 404

"NetworkError: 404 Not Found - http://www.bayingwolf.com/site_pop_up/source/jquery.fancybox-1.3.4.pack.js"

【讨论】：

【解决方案2】：

几个问题

1) jquery.fancybox-1.3.4.pack.js 未加载..（404 错误。）您可能需要正确检查路径 2) $(document).ready(function(){

缺少结束标签

<script>
$(document).ready(function() {
        $('.fancybox').fancybox();
        $('.fancybox-buttons').fancybox({
            openEffect  : 'none',
            closeEffect : 'none',
            prevEffect : 'none',
            nextEffect : 'none',
            closeBtn  : false,
            helpers : {
                title : {
                    type : 'inside'
                },
                buttons : {}
            },
            afterLoad : function() {
                this.title = 'Image ' + (this.index + 1) + ' of ' + 
                              this.group.length + 
                              (this.title ? ' - ' + this.title : '');
            }
        });
})
</script>

建议

正确缩进代码以避免细微的错误。

【讨论】：