CODEWITHSUNDEEP
javascriptjqueryfancybox
user725913
user725913

Reputation:

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

Upvotes: 1

Views: 3476

Answers (3)

Jack
Jack

Reputation: 8941

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.

Upvotes: 1

Dan Hanly
Dan Hanly

Reputation: 7839

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">

Upvotes: 5

user725913
user725913

Reputation:

I was able to get this working - I was just missing the following reference, unfortunately:

Upvotes: 0

Related Questions