salut a tous
je voulais savoir comment puis-je integrer Zoombox sur cakephp
quelles sont les etapes a suivre ?
merci :)
les memes que partout inclure le script avec les methode cake qui conviennent dans le layout et appliquer les ons attributs/valuers aux bonnes balises
merci de m'avoir rependu :)
voila ce que j'ai fait dans default.ctp
j'ai charger le css avec
<?php echo $this->Html->css('zoombox'); ?>
puis le js
<link rel="stylesheet/less" href="<?php echo $this->Html->url('https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'); ?> ">
<?php echo $this->Html->script('zoombox'); ?>
et enfin
<script type="text/javascript">
jQuery(function($){
$('a.zoombox').zoombox();
});
</script>
j'ai copier coller les lien dans l'Exemple pour tester
<a class="zoombox zgallery1" title="This is a racoon" href="http://grafikart.fr/img/zoombox/ratons/raton1.jpg"><img src="http://grafikart.fr/img/zoombox/ratons/min_raton1.jpg" class="bordered" alt="" /></a>
<a class="zoombox zgallery1" title="This is a racoon" href="http://grafikart.fr/img/zoombox/ratons/raton2.jpg"><img src="http://grafikart.fr/img/zoombox/ratons/min_raton2.jpg" class="bordered" alt="" /></a>
<a class="zoombox zgallery1" title="This is a racoon" href="http://grafikart.fr/img/zoombox/ratons/raton3.jpg"><img src="http://grafikart.fr/img/zoombox/ratons/min_raton3.jpg" class="bordered" alt="" /></a>
<a class="zoombox zgallery1" title="This is a racoon" href="http://grafikart.fr/img/zoombox/ratons/raton4.jpg"><img src="http://grafikart.fr/img/zoombox/ratons/min_raton4.jpg" class="bordered" alt="" /></a>
<br/><br/>
j'ai aussi modifier le chemin des image dans zoombox.css
ca marche pas
$this->Html->css inclus un fichier css qui se trouve dans le dossier webroot/css donc dans ce cas, ça ne marchera pas vu que le fichier se trouve dans le dossier webroot/js/zoombox.
Ensuite pour l'inclusion de jquery, suffit de mettre le lien en brut et à l'ancienne.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Voila ça devrait fonctionner maintenant :)
yilkam, c'est bon ce que tu as fait pour le css si effectivement, tu as mis zoombox.css dans webroot/css (ce qui est le plus logique à faire, pour l'inclusion du js de zoombox, c'est bon aussi à condition que zoombox.js soit dans webroot/js et pour l'inclusion de jquery, adopte ma méthode de nazahel (bien que je préfère avoir le fichier jquery.js comme ca quand je développe hors ligne, ca fonctionne toujours :) ) apres pour les classes à mettre sur les liens et tout ca, je peux as te dire si c'est bon, je n'ai jamais utilisé zoobox, j'ai travaillé avec des gens qui ont développés ces parties ^^
pour les classe cette partie je l'ai copier depuis l'exemple de zoombox juste pour essaye. ca peut etre que dans la vue on peut pas mettre ca ?
<a class="zoombox zgallery1" title="This is a racoon" href="http://grafikart.fr/img/zoombox/ratons/raton1.jpg"><img src="http://grafikart.fr/img/zoombox/ratons/min_raton1.jpg" class="bordered" alt="" /></a>
<a class="zoombox zgallery1" title="This is a racoon" href="http://grafikart.fr/img/zoombox/ratons/raton2.jpg"><img src="http://grafikart.fr/img/zoombox/ratons/min_raton2.jpg" class="bordered" alt="" /></a>
<a class="zoombox zgallery1" title="This is a racoon" href="http://grafikart.fr/img/zoombox/ratons/raton3.jpg"><img src="http://grafikart.fr/img/zoombox/ratons/min_raton3.jpg" class="bordered" alt="" /></a>
<a class="zoombox zgallery1" title="This is a racoon" href="http://grafikart.fr/img/zoombox/ratons/raton4.jpg"><img src="http://grafikart.fr/img/zoombox/ratons/min_raton4.jpg" class="bordered" alt="" /></a>
<br/><br/>
dans l'inspecteur il me donne cette erreur ncaught TypeError: Object #<Object> has no method 'zoombox'
je comprends plus rien la
j'ai placé .css et les images dans le dossier js pour voir si j'ai oublié de changer une chemin ...
voila une nouvelle erreur pour le css
Syntax Error on line 30
http://localhost/www/cakephp/js/zoombox.css on line 30, column 2:
29
filter:alpha(opacity=0);
30
-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
31
-moz-opacity:0;
les erreurs CSS c'est souvent quand ton navigateur ne sait pas les interpréter, tu dois etre avec firefox qui tente d'interpréter une regle pour IE (-ms-filter...)
pour ton erreur JS je vois pas trop... est ce que dans ton inspecteur, lorsque tu cherches à afficher le contenu de zoombox.js il s'affiche ou tu as une 404 ?
si y'a pas ce je vais pas pouvoir t'aider plus je crois...
non non je suis sur chrome normalement il interprète bien les css
pour moi lorsque je clique sur l'image il me dirige vers l'image sans l'effet
Peut-être trouvé, si ton script zoombox.js se trouve dans un dossier zoombox, tu doit écrire ça :
<?php echo $this->Html->script('zoombox/zoombox'); ?>
ca marche maintenant en fait j'ai plusieurs d'autre js celle de bootsrap de twitter qui cause un problèmes je les ai supprimer et ca marche
je voulais savoir si vous pouvez m'aider sur ca :
echo $this->Html->link(
$this->Html->image($v'url'], array('alt'=>'')),
$v'url'],
array('rel'=>'example_group', 'class'=>"zoombox zgallery1" ,'title'=>'Lorem ipsum dolor sit amet', 'escape'=>false)
);
me genere ce lien :
<a href="/www/cakephp/medias/video/tarab-asil/Capture.png" rel="example_group" class="zoombox zgallery1" title="Lorem ipsum dolor sit amet"><img src="/www/cakephp/img/video/tarab-asil/Capture.png" alt="" /></a>
comment je peux changer ca pour qu'il me genere ce lien :
<a href="/www/cakephp/IMG/video/tarab-asil/Capture.png" rel="example_group" class="zoombox zgallery1" title="Lorem ipsum dolor sit amet"><img src="/www/cakephp/img/video/tarab-asil/Capture.png" alt="" /></a>
changer media par img
c'Est bon aussi pour le lien pour le generer j'ai fait
echo $this->Html->link(
$this->Html->image($v'url'], array('alt'=>'')),
'/img/',$v'url'],
array('rel'=>'example_group', 'class'=>"zoombox zgallery1" ,'title'=>'Lorem ipsum dolor sit amet', 'escape'=>false)
);
Merci beaucoup a vous les deux : Nazahel et Flohw
Tu ne doit plus utiliser les technique que tu mentionne, mais utiliser le plug-in jQuery, va voir sur le site consacré à ce sujet.