我正在尝试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>
当我有一个简短的代码时,它工作正常。我已经在this site托管了该网站。有人能告诉我我做了什么以及如何解决它。
提前完成。
答案 0 :(得分:0)
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>