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]

5 réponses


RafikHaceb
Réponse acceptée

Essaye de mettre jquery.min avant le fichier js de zoombox.

Est ce que ça marche pour le lien édité directement en Html ?

xander
Auteur

non sa ne fonctionne pour le lien édité en html

xander
Auteur

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.