Fancybox 不起作用，图像以相同的方式打开 window

Question

我正在尝试使 fancybox 工作，但我可以让它工作。我一直在搜索论坛，但我找不到可以帮助我理解我做错了什么的答案。也许没必要说，但我是 jQuery 的真正初学者。

我有这样的代码：

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

<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <!-- jQuery -->
<link rel="stylesheet" href="css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /> <!-- fancybox -->
<script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.5"></script> <!-- fancybox -->

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

当我有一个简短的代码时，它可以工作 fine.I 在 this site 托管了该网站。谁能告诉我我做错了什么以及我是如何解决的。

提前致谢。

Answer 1

There is a jquery conflict, because of two jquery versions. 
Add all your js file to the bottom and in the following order just before </body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/modernizr.js"></script> <!-- Modernizr -->
    <script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.1.5"></script> <!-- fancybox -->
    <script src="js/main.js"></script> <!-- Resource jQuery -->
    <script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox();
        });
    </script>


Please remove all javascripts from the head section.

so your head section looks like :-

<head>
    <title>Alternate Fixed And Scroll Backgrounds</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

    <link rel="stylesheet" href="http://psteintj.home.xs4all.nl/css/reset.css"> <!-- CSS reset -->
    <link rel="stylesheet" href="http://psteintj.home.xs4all.nl/css/style.css"> <!-- Resource style -->


    <link rel="stylesheet" href="http://psteintj.home.xs4all.nl/css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /> <!-- fancybox -->

</head>

Fancybox 不起作用，图像以相同的方式打开 window

Fancybox doesn't work, image opens in same window

html

jquery

fancybox