fancybox sur des images dans les pages CMS Prestashop 1.6

[merlette]

Bonjour,

Quelqu'un sait-il comment intégrer des zooms fancybox sur des images de pages CMS avec la dernière version de Prestashop?

J'ai intégré ce code :

<p><a class="fancybox" href="http://www.hectoretvirgile.com/boutique/img/cms/bracelet-casoar-framboise.jpg"><img title="Bracelet Casoar framboise" src="http://www.hectoretvirgile.com/boutique/img/cms/bracelet-casoar-framboise.jpg" alt="Bracelet Casoar framboise" width="300" height="300" /></a></p>

C'est sur http://www.hectoretvirgile.com/boutique/index.php?id_cms=6&controller=cms&id_lang=1

J'ai bien un zoom au clic sur ma photo, mais je n'ai pas la croix Fancybox qui permet de fermer, ni le overlay de fond (enfin, c'est complétement noir opaque).

Quelqu'un a t il déjà fait cela ?

Merci d'avance!

[merlette]

Bonjour à tous,
Personne n'a fait de zoom sur des images intégrées dans les pages CMS ?

Merci de votre aide

[boris257]

Bonjour,
J'ai le même probleme que vous.... absence de croix sur le pop up... .Quelqu'un pourrait aider à regler ce probleme ? ... et ou  configurer l'overlay ?
Merci par avance.

 

[merlette]

bonjour,

je ne sais pas si vous avez trouvé la solution car je vois juste maintenant votre message. Je vois que sur un autre sujet, j'avais mis cette réponse : il faut rajouter le code script dans blockcms.tpl

, et modifier controller.php : rajouter

$this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
        $this->addJqueryPlugin('fancybox');

dans public function setMedia()

 

=>

public function setMedia()
    {
        parent::setMedia();

        if ($this->assignCase == 1)
            $this->addJS(_THEME_JS_DIR_.'cms.js');

        $this->addCSS(_THEME_CSS_DIR_.'cms.css');
    /*ajout  pour zoom dans page cms*/
        $this->addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
        $this->addJqueryPlugin('fancybox');
        /*fin ajout */
    }

et c'est tout bon, bien sûr il faut intégrer la class fancybox aux liens de la page cms et mettre les images dans img/cms

 

si ça peut vous aider..

[Centaure]

Bonjour,
 
Je ne trouve pas Controller.php ... c'est pas CmsController.php qu'il faut modifier ?
 
Et quand il faut rajouter le code script dans blockcms.tpl c'est ça ? :

{if $block == 1}

<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
	});
</script>

	<!-- Block CMS module -->

car chez moi ça ne fonctionne pas ...

[merlette]

Bonjour,

 

En fait, le plus simple pour que le fancybox fontionne partout, c'est de mettre le code dans le header.tpl

 

En effet, j'ai rajouté ceci dans header.tpl :

<script type="text/javascript" src="/js/jquery/plugins/fancybox/jquery.fancybox.js"></script>
<link rel="stylesheet" href="/js/jquery/plugins/fancybox/jquery.fancybox.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox();
});
</script>

 cf sujet : https://www.prestashop.com/forums/topic/472549-fancybox/?do=findComment&comment=2193574

 

Il faut bien sûr vérifier qu'il y a bien le fichier js dans le dossier js de Prestashop (pas dans celui du thème) et idem pour le fichier css appelé.
 

[merlette]

Et bien sûr j'oubliais, il faut ajouter la class sur les liens images des pages CMS

<a class="fancybox" href="..."><img  title="..." src="..." alt="..." /></a>

[Centaure]

Moi j'ai mis :

<script type="text/javascript" src="{$js_dir}jquery/plugins/fancybox/jquery.fancybox.js"></script>
<link rel="stylesheet" href="{$js_dir}jquery/plugins/fancybox/jquery.fancybox.css" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
$("a.fancybox").fancybox();
});
</script>

avec {$js_dir} au lieu de /js/ comme ça ça détecte automatiquement le répertoire js

 

Par contre  j'ai un soucis car j'aimerai créer une gallerie donc avoir plusieurs vignettes et quand on en clique une on la en grand et on peut faire défiler les autres ...

 

il faut utiliser le paramètre "rel" comme ceci :

<a class="fancybox" rel="group1" href="...

 

mais cela ne fonctionne pas, le code rel="group1" est automatiquement effacé par prestashop alors que dans le fichier /classes/Validate.php

j'ai bien désactivé tous les suppressions de codes comme expliqué ici pour avoir le TinyMCE complet :

https://mypresta.eu/...ext-editor.html

 

Merci par avance pour votre aide

[merlette]

Alors là, désolée, je ne peux pas vous aider. Mais ça m'intéresse de savoir comment ça fonctionne aussi!

[tiendatutorial]

try this