Question

我之前已经成功集成了fancybox，因此我意识到了尝试对其进行故障排除时常见的嫌疑人 - 我似乎仍无法让它发挥作用。我甚至尝试直接链接fancybox js和css的url，以及删除除了特定于fancybox之外的所有其他jQuery库/脚本。我很难过。

链接到测试网站：http://parkerrichard.com/studiogreen/html/elements/fire.html

HTML：

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=“UTF-8”>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap Core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Custom CSS -->
    <link href="../css/custom.css" rel="stylesheet">

    <!-- fancybox -->
    <link rel="stylesheet" href="../fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="../fancybox/source/jquery.fancybox.pack.js"></script>

    <!-- Typekit Custom Fonts -->
    <script src="//use.typekit.net/bcn3ife.js"></script>
    <script>try{Typekit.load();}catch(e){}</script>

    <link href="../css/flexslider.css" rel="stylesheet">

    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]-->

    <!-- Javascript Library -->
    <script src="../js/respond.min.js"></script>

</head>

<body>  
    <div>
        <div>
            <!-- elements row -->           
            <div class="col-lg-7 col-md-8 col-sm-7 pull-left">
                <!-- elements images -->  
                <div class="mb-sm row elements">
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <a class="fancybox" href="../img/elements/fire/img-01.jpg"><img src="../img/elements/fire/img-01.jpg" class="img-responsive pull-left"></a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <a class="fancybox" href="../img/elements/fire/img-02.jpg"><img src="../img/elements/fire/img-02.jpg" class="img-responsive img-centered"></a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <a class="fancybox" href="../img/elements/fire/img-03.jpg"><img src="../img/elements/fire/img-03.jpg" class="img-responsive pull-right"></a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <a class="fancybox" href="../img/elements/fire/img-04.jpg"><img src="../img/elements/fire/img-04.jpg" class="img-responsive pull-left"></a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <a class="fancybox" href="../img/elements/fire/img-05.jpg"><img src="../img/elements/fire/img-05.jpg" class="img-responsive img-centered"></a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <a class="fancybox" href="../img/elements/fire/img-06.jpg"><img src="../img/elements/fire/img-06.jpg" class="img-responsive pull-right"></a>
                    </div>
                </div>
            </div><!--/elements row -->
        </div><!--/body row -->
    </div><!--/container -->


    <!-- javascript -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/jquery.flexslider.js"></script>
    <script src="../js/jquery.studio-green.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
    </script>


</body>
</html>

Answer 1

在包含jQuery之后，应该包含jquery.fancybox.pack.js。

在jquery.studio-green.js中也有一个错误，您可以在其中引用“查询”。

摆脱那些JS错误，然后再试一次。

Answer 2

在“jquery.studio-green.js”之后在页面底部添加“jquery.fancybox.pack.js”：

<!-- javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.flexslider.js"></script>
<script src="../js/jquery.studio-green.js"></script>
<script type="text/javascript" src="../fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>

希望这能解决您的问题。

无法获得fancybox来加载图片

2 个答案: