Estou a tentar fazer uma galeria, que consiste numa listagem de miniaturas, que ao clicar nos items eventualmente faria aparecer uma janela popup como no primeiro exemplo aqui.
Após várias tentativas falhadas, onde até as miniaturas não apareciam, por sugestão de outras pessoas, procurei resolver este problema com o plugin CakePHP-Fancybox, que me resolveu parcialmente o problema. No entanto ao clicar nas miniaturas o utilizador é redireccionado para outra página que mostra a imagem original, em vez de a fazer flutuar sobre a página das miniaturas.
Após resolver os vários erros relacionados com o não encontrar o javascript e ter reinstalado o Fancybox Plugin para o CakePHP, a lightbox não aparece. Como se pode resolver estas situações?
Action do Controller:
public function ShowImages(){
$this->layout = 'default';
$this->loadModel('GalleryImage');
$gallery_images = $this->GalleryImage->find('all');
$this->set('gallery_images', $gallery_images);
//$image_display = $gallery_image['path']
}
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>
Layout (head):
<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');
?>
<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>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5">
$(document).ready(function () {
$(".fancybox3").fancybox(e){
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'float'
}
}
e.preventDefault;
});
});
</script>
</head>
<?php $i++;
não esta fechado, na classeGalleryController
tem uma}
a mais, não retirei para não alterar o codigo postado, mas vale apena voce revisar =).