无法让 fancybox 加载图像

Question

我之前已经成功集成了 fancybox，所以我知道在尝试对其进行故障排除时通常会怀疑 - 我似乎仍然无法让它工作。我什至尝试直接链接 fancybox js 的 url 和 css，以及删除我的所有其他 jQuery libraries/scripts 除了 fancybox 特定的。我被难住了。

Link前往考点：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 中也有错误，您引用 "Query"。

摆脱那些 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 加载图像

Can't get fancybox to load images

html

jquery

fancybox