Home/ Questions/Q 6177709
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T00:19:26+00:00

I am a very new beginner and have been reading the help forums. All

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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