0

以下代码基于http://fancyapps.com/fancybox/3/docs/#usage上的演示代码，我希望显示一个图像灯箱，但代码不起作用，为什么？

致：瑞克，我已经用你的代码修改了我的代码，但它还不能工作，为什么？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My page</title>

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>

    <!-- Your HTML content goes here -->


    <a href="bmp/logo.png" data-fancybox data-caption="My caption">
        <img src="bmp/logo.png" alt="" />
     </a>

    <!-- JS -->
    <script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="jquery.fancybox.min.js"></script>
</body>
</html>

修改后的代码也不起作用。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My page</title>

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>

    <!-- Your HTML content goes here -->


    <a href="bmp/logo.png" data-fancybox data-caption="My caption">
        <img src="bmp/logo.png" alt="" />
     </a>

    <!-- JS -->
    <script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="jquery.fancybox.min.js"></script>

    <script type="text/javascript">
        $("[data-fancybox]").fancybox({
            // Options will go here
        });
    </script>

</body>
</html>
4

2 回答 2

0

您首先应该做的是打开开发人员工具并检查控制台是否有任何消息。应该有线索。我猜你没有正确加载 js 和 css 文件 - 检查它们是否存在并在需要时调整文件路径。

顺便说一句，你也可以使用 CSDN 的 fancyBox -

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
于 2017-03-19T11:23:24.280 回答
0

你没有初始化它..

<script type="text/javascript">
    $("[data-fancybox]").fancybox({
        // Options will go here
    });
</script>
于 2017-03-18T06:20:30.377 回答