Bonjour à tous ;), comme le titre l'indique j'ai installé zoombox sur cakephp du moins j'ai essayé de faire comme il fallait et je n'arrive pas à le faire fonctionné. Quand je regarde le code source avec firebug j'ai bien les fichiers CSS & JS mais sa ne fonctionne pas quand même. Si une âme charitable pouvais m'éclairé je lui en serais reconnaissant. Voici le code : **default.ctp** [code]
<?php echo $this->Html->charset(); ?> <title>
<?php echo $title ?>:
<?php echo $title_for_layout; ?>
</title><?php // récupération des styles & scripts
echo $this->Html->meta('icon'); echo $this->Html->css('style'); echo $this->Html->css('zoombox'); // plugin Zoombox de Grafikart pour les images & galeries d'images echo $this->Html->script('jquery'); // Script Jquery pour les message de notification echo $this->Html->script('zoombox'); // plugin Zoombox fichier JS echo $this->Html->script('jquery.min'); // Script Jquery pour Zoombox echo $this->fetch('meta'); echo $this->fetch('css'); echo $this->fetch('script'); ?> [...]<!-- script message --><script>
var myMessages = ['info','warning','error','success']; // define the messages types
function hideAllMessages()
{
var messagesHeights = new Array(); // this array will store height for each
}
function showMessage(type)
{
$('.'+ type +'-trigger').click(function(){
hideAllMessages();
$('.'+type).animate({top:"0"}, 500);
});
}
$(document).ready(function(){
// Initially, hide them all
hideAllMessages();
// Show message
for(var i=0;i<myMessages.length;i++)
{
showMessage(myMessages*);
}
// When message is clicked, hide it
$('.message').click(function(){
$(this).animate({top: -$(this).outerHeight()}, 500);
});
});
</script><!-- Script Zoombox V2 --><script>
jQuery(function($){
$('a.zoombox').zoombox();
/**
* Or You can also use specific options
$('a.zoombox').zoombox({
theme : 'zoombox', //available themes : zoombox,lightbox, prettyphoto, darkprettyphoto, simple
opacity : 0.8, // Black overlay opacity
duration : 800, // Animation duration
animation : true, // Do we have to animate the box ?
width : 600, // Default width
height : 400, // Default height
gallery : true, // Allow gallery thumb view
autoplay : false // Autoplay for video
});
*/
});
</script>[/code] \*\*Page concerné avec les images ( pour faire un test j'ai éditer un lien image en html )\*\* [code] <section class="works">
<article>
<a class="zoombox thumb" href="/YAcake/img/project1.jpg">
<img src="/YAcake/img/project1.jpg" alt="project">
</a>
<h3>Projet perso</h3>
<span>PHP procédural - HTML5 - CSS3</span>
</article>
<article>
= $this->Html->link($this->Html->image('project2.jpg', array('alt' => 'project')), '#', array('class' => 'thumb', 'escapeTitle' => false));
?>
<h3>Projet perso</h3>
<span>CakePHP - Ajax</span>
</article>
<article>
= $this->Html->link($this->Html->image('project5.jpg', array('alt' => 'project')), '#', array('class' => 'thumb', 'escapeTitle' => false));
?>
<h3>Florent Edmond</h3>
<span>CakePHP</span>
</article>
<article>
= $this->Html->link($this->Html->image('project4.jpg', array('alt' => 'project')), '#', array('class' => 'thumb', 'escapeTitle' => false));
?>
<h3>Site Personnel</h3>
<span>CakePHP</span>
</article>
<div class="cb"></div>
</section>[/code]
Parfait ! sa fonctionne a merveille merci mdr je m'attendait pas a une solution aussi simpliste que l'ordre de chargement des script
Oui, lorsque tu utilises un plugin qui dépend de Jquery, essaye toujours de déclarer Jquery au premier. De plus, c'est préférable de mettre les script avant </body> pas dans le header, comme ça tu seras sûr que le DOM est bien chargé ;).
Bon courage.