[RESOLU]Popup Fancybox non fonctionnel

[RESOLU]Popup Fancybox non fonctionnel - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : [RESOLU]Popup Fancybox non fonctionnel (/thread-2970.html)

[RESOLU]Popup Fancybox non fonctionnel - dwitgsi - 22/10/2013

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: -1.11.7
#~ Url du site : akelium.fr
#~ Hébergeur / Soft : Online.net
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.7
#~ Installed Modules:
#~ CMSMailer: 5.2.1
#~ FileManager: 1.4.3
#~ MenuManager: 1.8.5
#~ ModuleManager: 1.5.5
#~ News: 2.12.12
#~ Printing: 1.1.1
#~ Search: 1.7.8
#~ ThemeManager: 1.1.8
#~ TinyMCE: 2.8.1
#~ FormBuilder: 0.7.4
#~ CGExtensions: 1.37.2
#~ CMSPrinting: 1.0.4
#~ JQueryTools: 1.2.5
#~ CGSimpleSmarty: 1.7
#~ CGGoogleMaps: 2.4.7
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ max_upload_size: 50000000
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.4.6-1ubuntu1
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 2048
#~ E_DEPRECATED: 8192
#~ memory_limit: 128M
#~ max_execution_time: 120
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 8M
#~ upload_max_filesize: 50M
#~ session_save_path: /var/lib/php5 (0777)
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: cgi-fcgi
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.1.41
#~ Server Db Grants: Impossible de trouver un privilège "GRANT ALL". Cela peut signifier que vous pourriez avoir des problèmes pour installer ou retirer des modules, ou encore l 'ajout et la suppression d'éléments, y compris les pages.
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour,

N'étant pas un as du développement (admin réseau de formation), je me heurte à un problème de FancyBox en ayant suivit plusieurs tuto, notamment celui de Jean le Chauve.
Croyez-moi, j'en ai effectuées des recherches sur le forum...

Je souhaite insérer une Google map dans une fancybox.
J'ai réussi a bien paramétrer mon plugin CGGoogleMaps, la carte fonctionne parfaitement. Mon problème est que cette dernière s'ouvre "normalement" et non dans un popup.

Dans ma page "appelante" :
- Contenu :

Code :
[== XHTML ==]

<p><a class="iframe" rel="popup" href="index.php?page=GoogleMap"><img style="border:2px ridge #D0147D;" src="/images/akelium/map_akelium.jpg" alt="MAP" /></a></p>

- Métadonnées :

Code :
[== Indéfini ==]

{JQueryTools action=incjs}

{literal}

<script type="text/javascript">

jQuery(document).ready(function($)

    {

$("a.iframe").fancybox({

 'width': 700,

 'height': 700, 'speedIn': 700, 'speedOut': 700, 'overlayShow': false});

});

</script>

{/literal}

Dans ma page "appelé" contenant la Google map :
- Gabarit :

Code :
[== XHTML ==]

{process_pagedata}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

{* Change lang="en" to the language of your site *}

<head>

<title>{sitename} - {title}</title>

{* The sitename is changed in Site Admin/Global settings. {title} is the name of each page *}

{metadata}

{* Don't remove this! Metadata is entered in Site Admin/Global settings. *}

{cms_stylesheet}

{* This is how all the stylesheets attached to this template are linked to *}

</head>

<body>

      {* Start Content *}

      <div>

         <h2>{title}</h2>

         {content} 

      </div>

      {* End Content *}

</body>

</html>

- Contenu :

Code :
[== Indéfini ==]

{CGGoogleMaps}

- Métadonnées :

Code :
[== XHTML ==]

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Auriez-vous une idée pourquoi lors du clic sur le lien, le popup ne se lance pas ?

Merci par avance pour vos réponses.

Antoine

[RESOLU]Popup Fancybox non fonctionnel - bess - 22/10/2013

upgrade cmsmadesimple stp, on ne fait pas de support sur d'ancienne version. idem pour la version de Jquery, ils en sont à la 2.0 maintenant, ça serait bien de mettre à jour je pense Wink

sans trop regarder de près : sous FF tu fais Crtl + Shift + J et tu regarde s'il y a une erreur Javascript, ça pourrait expliquer.

tu peux également tester avec les paramètres de base de fancybox

$("a.iframe").fancybox();

enfin

[RESOLU]Popup Fancybox non fonctionnel - dwitgsi - 22/10/2013

Merci pour la réponse rapide.

J'ai effectué l'upgrade vers la version 1.11.9 et mis la version 2.0.3 de JQuery.
Dans la console de Chrome, à priori aucune erreur de Javascript. Il est possible que je m'en serve mal...
Et enfin, j'ai testé avec les paramètres par défaut de Fancybox, mais rien y fait...

[RESOLU]Popup Fancybox non fonctionnel - bess - 22/10/2013

on parle de akelium point fr et de son menu Gmap ?

alors tu as des soucis car chez moi le code généré du menu c'est <a class=" " href="xxx/index.php?page=googlemap">GoogleMap</a> et non pas ce que tu indique dans ton premier post

et pense au passage à corriger tes 3 petites erreurs HTML http://validator.w3.org/

[RESOLU]Popup Fancybox non fonctionnel - dwitgsi - 22/10/2013

C'est bien ce site là.
Le lien n'est pas à partir du menu mais de la photo miniature de GMap.

Merci pour l'info W3C, je m'en occupe. Wink

[RESOLU]Popup Fancybox non fonctionnel - bess - 22/10/2013

dans page=googlemap ?? je ne vois pas de miniature moi Sad

[RESOLU]Popup Fancybox non fonctionnel - Jean le Chauve - 22/10/2013

Salut,
Pour ma part, je n'utilise pas de page du site avec la googlemap : le clic sur l'image ouvre la fancybox avec GoogleMap à l'intérieur. Le code se situe par ailleurs dans un content bloc, ce qui allège le gabarit.
Ex : http://www.confederationparascolaire.org/contactez-nous.html

Code :
...

<head>

...

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="/modules/JQueryTools/lib/jquery.fancybox/jquery.fancybox-1.3.1.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="/modules/JQueryTools/lib/jquery.fancybox/jquery.fancybox-1.3.1.css" />

...

</head>

<body>

...

{literal}<script type="text/javascript">

$(document).ready(function() {

$("a.iframe").fancybox({

        'width': 700,

        'height': 700, 'speedIn': 700, 'speedOut': 700, 'overlayShow': false

}); 

});

</script>{/literal}

...

<p><a class="iframe" rel="popup- map" href="http://maps.google.fr/maps?f=q&amp;source=s_q&amp;hl=fr&amp;geocode=&amp;q=14+Rue+du+Moniteur,+Bruxelles,+Belgique&amp;aq=0&amp;sll=46.75984,1.738281&amp;sspn=14.5166,33.815918&amp;ie=UTF8&amp;hq=&amp;hnear=Rue+du+Moniteur+14,+1000+Bruxelles,+Belgique&amp;ll=50.84902,4.364681&amp;spn=0.018967,0.036478&amp;z=14&amp;iwloc=A&amp;output=embed"><img src="uploads/images/layout/CP-asbl-Rue-du-Moniteur-14-1000-Bruxelles.png" alt=" Rue du Moniteur, 14 1000 Bruxelles" /></a></p>

...

[RESOLU]Popup Fancybox non fonctionnel - dwitgsi - 23/10/2013

bess a écrit :dans page=googlemap ?? je ne vois pas de miniature moi

C'est sur la page "Votre accès".

Jean le Chauve, c'est exactement sur cet exemple que je me basais.
Cependant, après avoir testé le code que tu as mis, la map s'ouvre mais pas dans la Fancybox, juste en pleine page...
Je dois sûrement faire quelque chose de mal mais quoi ?
Pourtant, sur la page d'accueil, j'ai bien réussi à utiliser la Fancybox pour une image... A n'y rien comprendre !

[RESOLU]Popup Fancybox non fonctionnel - Jean le Chauve - 23/10/2013

Pour l'instant, je ne vois pas l'appel aux scripts JS dans ta head.
Essaye en ne mettant que les codes JS que je t'ai mis plus haut (mêmes versions et pas le module) et dit-nous quoi.
Je pense avoir eu le problème avec les dernières versions de js (1.9+ je crois).
Essaye également avec le même code href="http://maps.google.fr/maps?... comme cela tu auras fais le tour de toutes possibilités d'erreurs.

[RESOLU]Popup Fancybox non fonctionnel - misterpink - 23/10/2013

bess a écrit :on parle de akelium point fr et de son menu Gmap ?

alors tu as des soucis car chez moi le code généré du menu c'est <a class=" " href="xxx/index.php?page=googlemap">GoogleMap</a> et non pas ce que tu indique dans ton premier post

et pense au passage à corriger tes 3 petites erreurs HTML http://validator.w3.org/

comme dit bess je ne vois pas déja comment cela peut marcher puisque ton lien n'a pas la class iframe et pas le rel popup...

Enfin jdit ça jdit rien ;-) mais cela me semble très bizarre non??

[RESOLU]Popup Fancybox non fonctionnel - dwitgsi - 23/10/2013

JlC, voilà qui est fait.

Misterpink, bess regardait au mauvais endroit comme dit par la suite :

dwitgsi a écrit :Le lien n'est pas à partir du menu mais de la photo miniature de GMap.

[RESOLU]Popup Fancybox non fonctionnel - misterpink - 23/10/2013

Ok, alors mets cela comme class : fancybox.iframe

et normalement pas besoin du rel

[RESOLU]Popup Fancybox non fonctionnel - dwitgsi - 23/10/2013

Malheureusement, cela ne change rien.

[RESOLU]Popup Fancybox non fonctionnel - Jean le Chauve - 23/10/2013

"NetworkError: 404 Not Found - http://akelium.fr/modules/JQueryTools/lib/jquery.fancybox/jquery.fancybox-1.3.1.js\"
Voilà l'adresse pour le récupérer : http://code.google.com/p/fancybox/downloads/detail?name=jquery.fancybox-1.3.1.zip&can=2&q=
"NetworkError: 404 Not Found - http://akelium.fr/modules/JQueryTools/lib/jquery.fancybox/jquery.fancybox-1.3.1.css\"
Prends-le sur la page donnée plus haut.
et reste avec la classe "popup- map" (sorry Misterpink, mais c'est celle qui fonctionne pour ce JS).
Si ça fonctionne, essaye d'upgrader les versions en vérifiant bien la doc.

[RESOLU]Popup Fancybox non fonctionnel - misterpink - 24/10/2013

Jean le Chauve a écrit :et reste avec la classe "popup- map" (sorry Misterpink, mais c'est celle qui fonctionne pour ce JS).

No blemo JLC :p

[RESOLU]Popup Fancybox non fonctionnel - dwitgsi - 24/10/2013

J'ai remplacé par ces lignes ci-dessous, et le message d'erreur à disparu.
Est-ce suffisant ? Mais le problème persiste...

Code :
[== XHTML ==]

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

<script type="text/javascript" src="/modules/JQueryTools/lib/fancybox.lib/jquery.fancybox.js"></script>

<link rel="stylesheet" type="text/css" media="screen" href="/modules/JQueryTools/lib/fancybox.lib/jquery.fancybox.css" />

[RESOLU]Popup Fancybox non fonctionnel - Jean le Chauve - 24/10/2013

Maintenant je vois ceci dans firebug :
TypeError: menu is undefined
http://akelium.fr/index.php?page=Votre-acces
Line 172
<script type="text/javascript">
var menu=new menu.dd("menu");
menu.init("menu","menuhover");
</script>
Tu n'utilises pas la bonne feuille de style fancybox : v2.1.3 au lieu de 1.3.1.
On gagnera du temps si tu respectes mes consignes Wink

[RESOLU]Popup Fancybox non fonctionnel - dwitgsi - 24/10/2013

Au temps pour moi ! Tongue

Merci Jean le Chauve, tout fonctionne parfaitement !

Reste plus qu'à trouver pourquoi j'ai souvent des erreurs fatales de template et qui partent avec une actualisation de la page...