I get this error in the 3rd line of this code to make a lightbox appear with an image by clicking on it, using fancybox 2, with CakePHP. I can not understand why this is happening, can someone help me?
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox3").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'float'
}
}
});
});
</script>
View
<h2>Galeria</h2>
<br>
<table width="100%">
<tr>
<?php
$i=0;
foreach( $gallery_images as $gallery_image ):?>
<td align="center" class="thumbnail" style="display:inline-block;">
<?php
$src3 =$this->webroot. 'img/gallery/' .$gallery_image['GalleryImage']['path'];
//$src3 = 'img/gallery/' .$gallery_image['GalleryImage']['path'];
$this->Fancybox->setProperties( array(
'class' => 'fancybox3',
'className' => 'fancybox.image',
'title'=>'Single Image',
'rel' => 'gallery1'
)
);
$this->Fancybox->setPreviewContent($this->Timthumb->image('/img/gallery/' . $gallery_image['GalleryImage']['path'] , array('width' => 267, 'height' => 189)));
$this->Fancybox->setMainContent($src3);
echo $this->Fancybox->output();
?>
</td>
<?php $i++;
if($i==4){
echo "</tr><tr>";
$i=0;
}
?>
<?php endforeach ?>
</tr>
</table>
Layout
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?php echo $title_for_layout;//titulo dinamico da página?></title>
<?php
echo $this->Html->meta('icon');
//echo $this->Html->css('cake.generic');
echo $this->fetch('meta');
echo $this->fetch('css');
echo $this->Html->script('jquery-1.11.0.min');
echo $this->Html->script('main');
echo $this->Html->css('main');
echo $this->Html->script('modernizr-2.6.2-respond-1.1.0.min');
echo $this->Html->css('bootstrap-theme.min');
echo $this->Html->css('bootstrap.min');
echo $this->Html->css('bootstrap');
echo $this->Html->script('bootstrap.min');
echo $this->Html->script('bootstrap');
echo $this->Html->script('dropdown');
echo $this->Html->script('collapse');
echo $this->Html->script('jquery.fancybox.pack.js?v=2.1.5');
?>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<script type="text/javascript">
$(function(){
$(".dropdown-toggle").click(function(){
$(this).dropdown('toggle');
});
});
</script>
<!-- src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"-->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<?php
$home_link_image= $this->webroot."img/PushUp.png";
if(!$this->Session->check('Admin')){
$home_link = "/html/PushUp_app/";
}
else{
$home_link = "/html/PushUp_app/admins/admin_index";
}
echo "<a class=\"pushup_logo\" href=\"".$home_link."\">";
//echo" <img src=\"".$home_link_image."\" name=\"logo\" id=\"logo\"/>";
?>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<?php
//if(!$this->Session->check('User')){
echo $this->Html->link('Home', array('controller'=>'home', 'action'=>'index'));
//}
/*else{
echo $this->Html->link('Administrador', array('controller'=>'admins','action' =>'admin_index'));
}*/
?>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Serviços <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><?php echo $this->Html->link('Música', array('controller'=>'services', 'action'=>'Musica'))?></li>
<li><?php echo $this->Html->link('Animação Temática', array('controller'=>'services', 'action'=>'AnimacaoTematica'))?></li>
<li><?php echo $this->Html->link('Promoção', array('controller'=>'services', 'action'=>'Promocao'))?></li>
<li><?php echo $this->Html->link('Staff', array('controller'=>'services', 'action'=>'Staff'))?></li>
<li><?php echo $this->Html->link('Aluguer', array('controller'=>'services', 'action'=>'Aluguer'))?></li>
</ul>
</li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">Galeria<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><?php echo $this->Html->link('Fotografias', array('controller'=>'galleries', 'action'=>'ShowImages'))?></li>
<li><?php echo $this->Html->link('Videos', array('controller'=>'galleries', 'action'=>'ShowVideos'))?></li>
</ul>
</li>
<li><?php echo $this->Html->link('Cartaz', array('controller'=>'showbills', 'action'=>'ShowShowbill'))?></li>
<li><?php echo $this->Html->link('Contactos', array('controller'=>'contacts', 'action'=>'ShowContactUs'))?></li>
<li><?php
/* if(!$this->Session->check('User')){
echo $this->Html->link('Log-in', array('controller'=>'users','action' =>'login'));
}
else{
echo $this->Html->link('Log-out', array('controller'=>'users','action' =>'logout'));
}*/
?>
</li>
</ul>
</li>
</ul>
<!--<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>-->
</div><!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
</div>
</div>
<div class="container">
<?php echo $this->Session->flash();?>
<!-- Example row of columns --><?php echo $this->fetch('content');?><!--carrega o conteudo para a página-->
<div class="row">
<div class="col-lg-4">
</div>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<!--<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>-->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox3").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'float'
}
}
});
});
</script>
<?php echo $this->Js->writeBuffer(); ?>
</body>
</html>