Ask your JavaScript questions! Pay money and get answers fast! (more info)

jQuery Fancybox TypeError: t is undefined JavaScript

  • SOLVED

If I go to the front page of my client's site, then Fancybox works great. This is the HTML source, with only a few blocks of text removed, and with the Fancybox links at the botom:


<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/engine1/style.css" />
<script type="text/javascript" src="/engine1/jquery.js"></script>



<script type="text/javascript" src="/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="/css/style.css" />


</head>
<body>

<header>
<div class="main">
<div class="head-box1">
<div class="head-box-login">
<div class="head-box-login-text">
<span class="email"><a href="mailto:[email protected]?Subject=Thank You for Contacting Robot Fruit">[email protected]</a></span> | <span class="login"><a href="#">Log Out</a></span> <img src="/images/login-arrow.png" alt="">
</div>
</div>
<h1><a href="/"></a></h1>
</div>
</div>
</header>


<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
</section>





<br style="clear:both;" />


<a class="example6" href="/static/page/name/about">About Us</a> |
<a class="example6" href="/calendar">Calendar</a> |
<a class="example6" href="/feeds/importEvents">Import events</a> |
<a class="example6" href="/people">People</a> |
<a class="example6" href="/points">Points</a> |
<a class="example6" href="/points/stats">Point Stats</a> |
<a class="example6" href="/points/ratings">Point Ratings</a> |
<a class="example6" href="/social">Social</a> |
<a class="example6" href="/social/wall">Social Wall</a> |
<a class="example6" href="/social/edit">Social Edit</a> |
<a class="example6" href="/wordpress">WordPress</a> |
<a class="example6" href="/notifications">Notifications</a>

</body>
</html>



However, if I go to an inner page, then FancyBox stops working. In FireFox, using FireBug, I instead get an error that says "TypeError: t is undefined". You can see the screenshot. Here is the HTML:


<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/reset.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/css/grid.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/engine1/style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="/js/jquery.fancybox-1.3.4.css" />
<script type="text/javascript" src="/engine1/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox-1.3.4.pack.js"></script>



<script type="text/javascript" src="/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/js/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="/css/style.css" />


</head>
<body>
<section id="content">

<link rel="stylesheet" href="/css/style.css" />
<script type="text/javascript">
$(document).ready(function() {
$(".grid_1_icon a.modl").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.7
});
});
</script>
<div class="layout_app">
<div class="container_12">
<div class="wrapper p1">
<article class="grid_4">
<div class="app_main1">
<select name="select" class="dropdown1">
<option value="Select">Select</option>
<option value="1">Black iPhone</option>
</select>
</div>
<div class="app_main2"> Select Device </div>
<div class="app_main3">
<div class="screen">
<div class="screen-bkg">
<div class="screen-head">Your Restaurant</div>
<div class="screen-main"><img src="/images/app_phone2.png" width="219" height="161"></div>
<div class="button-bkg">
<div class="buttona">Make Reservations</div>
<div class="buttonb">Browse Menu</div>
<div class="buttonb">Today's Deal</div>
<div class="buttonb">Free Recipe's</div>
</div>
</div>
</div>
</div>
<div class="app_main4">
<div class="left"><a href="#"><img src="images/java_1.png" width="134" height="203" alt="java1"></a> Welcome Screen </div>
<div class="right"><a href="#"><img src="images/java_2.png" width="134" height="203" alt="java2"></a> Screen 2 </div>
</div>
</article>
<article class="grid_8">
<div class="app_main_right">
<div id="nav-bkg">
<div class="active-drop"><a href="#">Drop In Modules</a></div>
<div class="vis"><a href="#">Visuals</a></div>
<div class="icon"><a href="#">Icons</a></div>
<div class="lay"><a href="#">Layout</a></div>
<div class="pro"><a href="#">Produce</a></div>
</div>
<form action="" method="post" name="form">
<div id="right-content">
<div class="app_main6">
<article class="grid_1_icon">
<a class="modl" href="/people"><img src="/images/app_icon1.png"></a>
<div class="icon-title">Video</div>
</article>
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon2.png"></a>
<div class="icon-title">Photos</div>
</article>
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon3.png"></a>
<div class="icon-title">Web</div>
</article>
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon4.png"></a>
<div class="icon-title">Social</div>
</article>
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon5.png"></a>
<div class="icon-title">Ads</div>
</article>
</div>
<div class="app_main6">
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon6.png"></a>
<div class="icon-title">Wordpress</div>
</article>
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon7.png"></a>
<div class="icon-title">Events</div>
</article>
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon8.png"></a>
<div class="icon-title">Drupal</div>
</article>
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon9.png"></a>
<div class="icon-title">Places</div>
</article>
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon10.png"></a>
<div class="icon-title">Audio</div>
</article>
</div>
<div class="app_main6">
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon11.png"></a>
<div class="icon-title">Twitter</div>
</article>
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon12.png"></a>
<div class="icon-title">Push</div>
</article>
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon13.png"></a>
<div class="icon-title">Facebook</div>
</article>
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon14.png"></a>
<div class="icon-title">About</div>
</article>
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon15.png"></a>
<div class="icon-title">Menu</div>
</article>
</div>
<div class="app_main6">
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon16.png"></a>
<div class="icon-title">News</div>
</article>
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon17.png"></a>
<div class="icon-title">Radio</div>
</article>
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon18.png"></a>
<div class="icon-title">People</div>
</article>
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon19.png"></a>
<div class="icon-title">Points</div>
</article>
<article class="grid_1_icon">
<a class="modl" href="#"><img src="images/app_icon20.png"></a>
<div class="icon-title">Deals</div>
</article>
</div>
</div>
</form>
<div id="right-buttons"> <a class="button-left posabs" href="#">Publish</a> <a class="button-right posabs" href="#">Next</a></div>
</div>
</article>
</div>
</div>
<div class="container_12">
<h2>Try Our Templates</h2>
<div class="app_bottom" style="height:374px;">
<link href="/css/movingboxes.css" rel="stylesheet">
<link href="/css/demo.css" rel="stylesheet">

<script src="/js/jquery.movingboxes.js"></script>

<style>
#slider { width: 960px; padding-left:100px; padding-right:100px; overflow:hidden; }
#slider li { width: 263px; }
</style>

<script>
$(function(){

$('#slider').movingBoxes({
startPanel : 1,
wrap : false,
buildNav : true,
navFormatter : function(){ return "‚óŹ"; }
});

});
</script>
<div id="wrapper">
<ul id="slider">
<li><a href="#"><img src="/images/01.jpg" alt="picture"></a></li>
<li><a href="#"><img src="/images/01.jpg" alt="picture"></a></li>
<li><a href="#"><img src="/images/01.jpg" alt="picture"></a></li>
<li><a href="#"><img src="/images/01.jpg" alt="picture"></a></li>
<li><a href="#"><img src="/images/01.jpg" alt="picture"></a></li>
<li><a href="#"><img src="/images/01.jpg" alt="picture"></a></li>
<li><a href="#"><img src="/images/01.jpg" alt="picture"></a></li>
<li><a href="#"><img src="/images/01.jpg" alt="picture"></a></li>
<li><a href="#"><img src="/images/01.jpg" alt="picture"></a></li>
<li><a href="#"><img src="/images/01.jpg" alt="picture"></a></li>
<li><a href="#"><img src="/images/01.jpg" alt="picture"></a></li>
<li><a href="#"><img src="/images/01.jpg" alt="picture"></a></li>
</ul>
</div> </div>
</div>
</div> </section>




</footer>

<br style="clear:both;" />


<a class="example6" href="/static/page/name/about">About Us</a> |
<a class="example6" href="/calendar">Calendar</a> |
<a class="example6" href="/feeds/importEvents">Import events</a> |
<a class="example6" href="/people">People</a> |
<a class="example6" href="/points">Points</a> |
<a class="example6" href="/points/stats">Point Stats</a> |
<a class="example6" href="/points/ratings">Point Ratings</a> |
<a class="example6" href="/social">Social</a> |
<a class="example6" href="/social/wall">Social Wall</a> |
<a class="example6" href="/social/edit">Social Edit</a> |
<a class="example6" href="/wordpress">WordPress</a> |
<a class="example6" href="/notifications">Notifications</a>
</body>
</html>




A link like this works if I simply go to this url in the browser:

<a class="modl" href="/people"><img src="/images/app_icon1.png"></a>


Does anyone know what would cause this error?

Answers (4)

2012-10-18

Utkarsh Kukreti answers:

You're including the scripts twice in the second page. Can you try removing the duplicates?

2012-10-18

Rainner Lins answers:

The JQuery library needs to be included before all the other JQuery plugins that depend on it.
Try to organize your script includes and see if that does it.
Also, the image you attached says the errors is coming from jquery.fancybox-1.3.4.pack.js on line 18, if i'm correct.
Might also want to have a look in there if organizing your script includes doesn't work.

2012-10-18

Arnav Joy answers:

try to remove other js and include only js necessary for fancybox then test it.

2012-10-19

Jessica Yazbek answers:

I believe the reason is because you have included jquery.fancybox-1.3.4.pack.js twice on your inner page. Try removing that and it should be fixed.