Can anyone spot the issue with my jQuery code - Fancybox
I am a very new beginner and have been reading the help forums. All I want to do (For now) is have an image ("mygoal.png") be be displayed in the center of the screen with a smooth transition. I was hoping that the image would be displayed as a glorified popup box which is what brought me to fancybox in the first place.
EDIT: I am getting the following two errors:
1) uncaught referenceerror: jquery is not defined
2) uncaught typeerro: object #<object> has no method fancybox
I am placing all of my code in one document - I hope this is the correct practice for jQuery.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<link href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
$(document).ready(function() {
/* I can't get the below code to work */
$("a#single_image").click(function(event开发者_开发技巧){
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false
});
});
</script>
</head>
<body>
<a id="single_image" href="mygoal.png"><img src="mygoal.png" alt=""></a>
</body>
</html>
Does anyone see my error in the above code? When I click the image now it just takes me to a new page - but no effect at all.
Thank you for reading,
Evan
It's because you've defined the Fancybox script BEFORE the JQuery Script.
The fancybox script is using JQuery methods and as you've not defined JQuery yet, it's causing exceptions:
//JQUERY FIRST
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
//FANCYBOX SECOND
<script src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<link href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css">
It should be.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" />
<script src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js" />
jQuery needs to be referenced before anything that uses it.
I was able to get this working - I was just missing the following reference, unfortunately:
加载中,请稍侯......
精彩评论