CODEWITHSUNDEEP
javascriptjqueryfancybox
Abs
Abs

Reputation: 57916

Fancybox troubles

I am trying to implement a fancybox. http://fancybox.net/howto

I want to call this function on an an element. Full JS file. http://fancybox.net/js/fancybox/jquery.fancybox-1.2.1.js

$.fn.fancybox = function(settings) {

I have done this:

$(document).ready(function() { 
    $("a#inline").fn.fancybox();  
});

However, I keep getting this error (through firebug):

$("a#inline").fn is undefined
[Break on this error] $("a#inline").fn.fancybox();

What does this mean? I am basically having instantiating problems.

Please help.

EDIT

The HTML file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Technologies</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="fancy/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fancy/jquery.fancybox-1.2.1.js"></script> 
<link rel="stylesheet" href="fancy/fancybox.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() { 
    $("a#inline").fancybox();  
}); 
</script>
</head>
<body>
<?php
include_once ("header.php");
?>
<div id="channel_calc">
How many Channels do I need?
<span id="yellow"><a id="inline" href="#ddm">Channel Calculator</a></span>
</div>

Upvotes: 1

Views: 19458

Answers (9)

Dexter Huinda
Dexter Huinda

Reputation: 1222

I have copied a fragment of your HTML and JS inside jsfiddle.

  • When I downgraded to jquery 1.3.2, [see left sidebar under framework in JSFiddle example] your code won't work.
  • When I upgrade to 1.4.4 or later versions, it worked.

Solution

  • Try upgrading your jquery to 1.4.4 or later versions and test again.
  • Also I noticed you are including an external header.php, so make sure there are no other jquery scripts being included in this file or your js codes will break.

See this link for the working example of your own code using jquery version 1.4.4: http://jsfiddle.net/Ca6N5/

Upvotes: 1

Chris Adams
Chris Adams

Reputation: 11

You have to make sure to load fancybox AFTER jquery, otherwise you will get a "fancybox is not a function" error and your other javascript will break as well:

BROKEN:

<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="/js/jquery-1.6.1.js"></script>

GOOD:

<script type="text/javascript" src="/js/jquery-1.6.1.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.js"></script>

Upvotes: 1

publikz.com
publikz.com

Reputation: 961

$("a#inline").fn.fancybox();
  1. use newest jquery & fancybox

  2. $("a#inline").fancybox(); -> this is correct

  3. Here is examples: http://softm.org.ua/google-map-jquery-plugins/

Upvotes: 0

Andy
Andy

Reputation: 3171

As Ben said, make sure jQuery is not being included twice by accident.

Upvotes: 0

Ben Trevino
Ben Trevino

Reputation: 21

I was also having this problem and found that I had included jquery.js twice. Removing the second reference fixed the error I was getting from the fancybox call

Upvotes: 2

jNik
jNik

Reputation: 21

Di you find the error? Had the same problem. Solution was that i had included twice a javascript file, rather i included the jquery.js file twice.

Upvotes: 2

meder omuraliev
meder omuraliev

Reputation: 186562

$('#inline').fancybox();

.fn refers to the prototype.

Upvotes: 3

Frederik Vig
Frederik Vig

Reputation:

$("a#inline").fn.fancybox(); should be $("a#inline").fancybox();

Upvotes: 1

richard
richard

Reputation: 14520

I think you forgot to also include jquery itself. Fancybox depends on jquery.

<script type="text/javascript" src="path-to-file/jquery.js"></script>

Upvotes: 0

Related Questions