•  12-09-2019
  •  | 
  •  

Question

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>
Was it helpful?

Solution 

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

.fn refers to the prototype.

OTHER TIPS

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.

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

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

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>

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/

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

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

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

$("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/
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top