Uncaught TypeError: $(...).fancybox is not a function
4,662 views
Skip to first unread message
Dario Ramos
Aug 31, 2015, 9:54:10 PM8/31/15
to FancyBox
I'm seeing this error in my Chrome console, and the fancybox is not loading when I click the link. I'm trying to fit a div inside it, like this:
<html>
<head>
<script src="/includes/js/jquery-1.6.4.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="all" href="/includes/js/fancybox/jquery.fancybox-1.3.4.css" id="fancybox">
<script src="/includes/js/fancybox/jquery.fancybox-1.3.4.pack.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" media="all" href="/css/style.css" id="style">
<script src="/includes/js/validate/lib/jquery.metadata.js" type="text/javascript"></script>
<script src="/includes/js/validate/jquery.validate.min.js" type="text/javascript"></script>
<script src="/js/imageflow.packed.js" type="text/javascript"></script>
<link rel="stylesheet" href="/includes/js/jquery-ui-1.11.4.custom/jquery-ui.min.css">
<script src="/includes/js/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
<script src="/includes/js/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script>
</head>
<body>
<!-- This is the link -->
<a id="link_la_posada" href="#la_posada_dialog">La Posada</a>
<!-- This is the div I want to place inside the fancybox -->
<div id="la_posada_dialog">
<p>Sobre Posada de Los Ángeles…</p>
<p>
Nuestro complejo se encuentra en Las Gaviotas a tan sólo 50 mts del mar y a pasos del centro comercial,
en donde encontrarás comercios, restaurantes, entretenimiento, entre otros.
</p>
<p>
Contamos con cabañas, lofts y suites pensadas para familias de hasta cuatro integrantes y parejas.
</p>
<p>
Todas nuestras unidades dan al frente teniendo vistas muy lindas. Los balcones de los lofts dan directamente a la copa de los pinos.
</p>
El acceso a la playa es excelente ya que el médano de ingreso a la misma es poco pronunciado.
</p>
<p>
Contamos con:
<ul>
<li> Cocheras semi cubiertas sin cargo para las cabañas. </li>
<li> Lugar para dejar el auto sin cargo para las suites y lofts. </li>
<li> Led 32´´ por Direct Tv. </li>
<li> Zona wifi sin cargo. </li>
<li> Servicio de ropa blanca. </li>
<li> Servicio de panadería. </li>
</ul>
</p>
</div>
<script type="text/javascript">
var $= jQuery.noConflict();
$(document).ready(function () {
$("#la_posada_dialog").hide();
$(".fancybox").fancybox(); //This is the line where I get the error
$('#link_la_posada').fancybox({
'autoScale': true,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'speedIn': 500,
'speedOut': 300,
'autoDimensions': true,
'centerOnScroll': true,
});
</script>
</body>
Only solutions I can think of are swapping the includes/rel order, or upgrading fancybox/jquery/jquery-ui. But I'd like to keep versions as they are, if possible. Any suggestion?
Dario Ramos
Sep 1, 2015, 1:04:45 AM9/1/15
to FancyBox
Solved it. Like I thought, the includes were the problem.
These two were in conflict:
<script src="/includes/js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/includes/js/jquery-ui-1.11.4.custom/external/jquery/jquery.js"></script>
JQueryUI was referencing another JQuery version. Since I dropped JQueryUI to use Fancybox, deleting the second include solved the
Fancybox issue. Now, if someone wants to mix JQueryUI and Fancybox, I wonder if this would work... perhaps the first include should be omitted in that case.
Reply all
Reply to author
Forward
0 new messages