时间戳

首页 > 解决方案 > Fancybox 不能正常工作

jquery - Fancybox 不能正常工作

问题描述

当我在正文中添加以下脚本时，我的 fancybox 代码不起作用。这里有什么问题？

$(document).ready(function() {
    $("a#example4").fancybox({
        'opacity'       : true,
        'overlayShow'	: false,
        'transitionIn'	: 'elastic',
        'transitionOut'	: 'none'
    });
});
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" Src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
</head>

<body>
    <a id='example4' href='./example/4_b.jpg'>Image</a>

    <!--WHEN I ADD THIS LINES-->
    <!-------------------------------------------->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/skel.min.js"></script>
    <!-------------------------------------------->
</body>

标签： jqueryhtml

解决方案

我认为其中一个问题是您两次包含 jQuery，一次在该<head>部分中，一次在该<body>部分中。您应该只包含一次。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
</head>

<body>
    <a id='example4' href='./example/4_b.jpg'>Image</a>

    <!--WHEN I ADD THIS LINES-->
    <!-------------------------------------------->
    <!-- <script src="assets/js/jquery.min.js"></script>  -->
    <script src="assets/js/skel.min.js"></script>
    <!-------------------------------------------->
</body>
</html>

推荐阅读