Forum CMS Made Simple FR

Version complète : [RESOLU]Popup Fancybox non fonctionnel
Vous consultez actuellement la version basse qualité d’un document. Voir la version complète avec le bon formatage.
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
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
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...
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/
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
dans page=googlemap ?? je ne vois pas de miniature moi Sad
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...-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>
...
bess a écrit :dans page=googlemap ?? je ne vois pas de miniature moi Sad
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 !
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.
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??
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.
Ok, alors mets cela comme class : fancybox.iframe

et normalement pas besoin du rel
Malheureusement, cela ne change rien.
"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/downlo...p&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.
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
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" />
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
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...