Zoombox et cakephp 3

merry18
CakePHP

Bonjour,

Voila je rencontre un petit problème avec mon code.
Actuellement je suis en train de tester cakephp 3, je cherche à créer une galerie d'images en utilisant Zoombox.
Tout d'abord j'ai créee une base de donnée qui contient la table Image. Lorsque l'on veut importer une image sur le site, on l'upload grâce à un formulaire mis en place dans la méthode add() de Image et l'image est envoyée dans un dossier url situé dans le dossier img. J'ai crée une méthode et une vue galerie afin d'afficher toutes les images situées dans le dossier url. Je n'ai pas de soucis et elle s'affiche bien.

Ce que j'essaie maintenant de réaliser, c'est que lorsque je clique sur une image, celle-ci apparait à l'écran dans une lightbox. J'ai vu que zoombox permettait de faire cela. J'ai donc importé le plug in dans le dossier plugins, j'active le plug in dans bootstrap, je configure dans ImageTable zoombox grâce à :

$this->addBehavior('zoombox',
                [
                'theme  '     => 'zoombox',        
                'opacity   '  => 0.8,              
                'duration'    => 800,              
                'animation'   => true,             
                'width'       => 600,              
                'height'      => 400,              
                'gallery'     => true,             
                'autoplay' => false 
                ]
        );

je crée zoomboxBehaviour avec la fonction de base que j'ai laissé vide. Dans ma vue galerie je charge les différents scripts (j'ai testé en les placant avant et à la fin du code)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<?php echo $this->Html->script('zoombox.js');?> 
<script type="text/javascript"> 
    jQuery(function($){ 
        $('a.zoombox').zoombox(); 
    }); 
</script>

et ensuite je crée une boucle qui va afficher toutes mes images dans un tableau

<?php
echo '<table class="galerie">';
echo '<tr>';
$i=0;
foreach ($image as $img)
{
    $replace = str_replace (DS,"/",$img['url']);
    if (($i % 4 )==0 ){
        echo '</tr>';
        echo '<tr>';
        echo '<td>' ;
        echo $this->Html->image($replace);  
        echo '</td>';
    }
    else{
        echo '<td>' ;
        echo $this->Html->image($replace);
        echo '</td>';
    }
        $i++;
    }
echo '</tr>';
echo '</table>';
?>

Je transforme donc ce code pour que mes images deviennent des liens qui pointent sur l'adresse à laquelle elle est stockée, j'ai fait un essai en stockant une image en dur avec le code suivant (donc techniquement lorsque je clique sur une image c'est toujours la même image qui est affichée au premier plan):

echo '<table class="zoombox">';
echo '<tr>';
$i=0;
foreach ($image as $img)
{
    $replace = str_replace (DS,"/",$img['url']);
    if (($i % 4 )==0 ){
        echo '</tr>';
        echo '<tr>';
        echo '<td>' ;
        echo $this->Html->link($this->Html->image($replace,array('alt'=>'CDI', 'title'=>'CDI', 'border'=>'none')),
   '/img/url/url-mon_image',
    array('class'=>'zoombox','escape' => false)
    );
        echo '</td>';
    }
    else{
        echo '<td>' ;
        echo $this->Html->link($this->Html->image($replace,array('alt'=>'CDI', 'title'=>'CDI', 'border'=>'none')),
        '/img/url/url-mon_image',
        array('class'=>'zoombox','escape' => false)
    );
        echo '</td>';
    }
        $i++;
    }
echo '</tr>';
echo '</table>';

Après toutes ces manipulations, j'ai bien ma galerie qui s'affiche, mais lorsque je clique sur mon image celle-ci ne s'affiche pas dans une ligthbox comme je le voudrais, mais cela m'envoie sur une autre url avec l'image en gros plan.

Je voudrais donc savoir ce que j'ai mal fait / mal compris et qui serait à rectifier dans mon code.

Voilà je vous remercie d'avoir pris le temps de me lire!
Bonne journée

Aucune réponse