Fancybox 不工作（初学者）

Question

我的 fancybox 不工作。我浏览了这些论坛，似乎无法弄清楚原因。我对此有些陌生。我读到 jquery 的较新版本的 fancybox 可能存在问题？

任何帮助将不胜感激，因为我真的很想在我的投资组合网站中实施 fancybox。

这是我正在处理的网站的link（请耐心等待，因为它仍在进行中）：http://calpoly.edu/~hmtorres/finalproject/index.html

这是我的代码：

    <!DOCTYPE html>

<html>

<head>

    <title>Haley Torres</title>

    <link rel="stylesheet" href="main.css">

    <!--google font-->
    <link href='http://fonts.googleapis.com/css?family=Roboto:500,400italic,700,300italic,400' rel='stylesheet' type='text/css'>

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

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

    <!-- Optionally add helpers - button, thumbnail and/or media -->
    <link rel="stylesheet" href="javascript/fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
    <script type="text/javascript" src="javascript/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
    <script type="text/javascript" src="javascript/fancybox/source/helpers/jquery.fancybox-media.js"></script>

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

    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="javascript/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>


</head>

<body>

    <div id="container">


    <div id="nav">

        <img src="images/identity-h80-w149.png" alt="Haley Torres">

        <ul>
            <li><a href="#work" class="smoothScroll">WORK</a></li>
            <li><a href="#about" class="smoothScroll">ABOUT</a></li>
            <li><a href="#resume" class="smoothScroll">RESUME</a></li>
            <li><a href="#contact" class="smoothScroll">CONTACT</a></li>
        </ul>


    </div><!--end of nav-->


    <div id="work">

        <br><!--line break pulls our computer from under navbar-->

        <img src="images/computer.png" alt="Work station">

        <h1>My Work</h1>

        <table>
            <tr>
                <td><a class="fancybox" href="images/moviepostermockup-large.png"  alt="Movie Poster"><img src="images/moviepostermockup-small.png" alt="Movie Poster"></a></td>
                <td><a class="fancybox" href="images/p4pmockup-large.png" alt="Pints for Pups Poster"><img src="images/p4pmockup-small.png" alt="Pints for Pups Poster"></a></td>
                <td><img src="images/personalidentity-small.png" alt="Personal Identity"></td>
            </tr>
            <tr>
                <td>row 2</td>
                <td>col 2</td>
                <td>col 3</td>
            </tr>

        </table>


    </div><!--end of work-->

再往下：

<!--fancybox-->
<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
    </script>

</body><!--end of body-->

</html>

我已将所有内容下载到正确的文件夹，并且link已正确编辑。当我点击图片时，它 link 变成了更大的图片，而不是在 fancybox 中弹出。

Answer 1

您在 HTML 中调用 jQuery 两次，这会破坏 Fancybox。尝试删除

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

来自您的 HTML 中的第 143 行，它应该可以工作。

Fancybox 不工作（初学者）

Fancybox isn't working (Beginner)

html

javascript

css

jquery

fancybox