Cakephp & Zoombox

Par xander, il y a 12 ans


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, il y a 12 ans

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

xander, il y a 12 ans

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

RafikHaceb, il y a 12 ans

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

xander, il y a 12 ans

Parfait ! sa fonctionne a merveille merci mdr je m'attendait pas a une solution aussi simpliste que l'ordre de chargement des script

RafikHaceb, il y a 12 ans

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.