Question

我的fancybox无效。我已经浏览了这些论坛，似乎无法弄清楚原因。我对此有些新意。我读到fqubox的新版本与jquery有问题？

我非常感谢任何帮助，因为我真的想在我的投资组合网站中实现fancybox。

以下是我正在处理的网站的链接（请耐心等待，因为它仍在进行中）：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>

我已将所有内容下载到正确的文件夹中并且链接正确。当我点击图像时，它会链接到较大的图像，而不是在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无法正常工作（初学者）

1 个答案: