[clarajuliette]

#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.5

#~ Hébergeur / Soft : oneandone cyberduck
#~ Informations Système :
#~ mac
#~ safari
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour,
J'essaye actuellement de développer un site web et utilise le module JqueryTools pour un usage spécifique :
L'idée est de placer des iframes s'affichant dans une fancybox. En cliquant sur une image, la fenêtre fancybox s'ouvrirait, contenant une iframe. Après avoir téléchargé JqueryTools, j'ai suivi les conseils d'installation mais, lorsque l'on clique, le lien censé s'ouvrir dans la fancybox s'ouvre dans une nouvelle page. Comment puis-je faire pour régler ce problème ?
J'ai cherché dans toutes les discussions de ce forum et ai appliqué les solutions proposées, sans résultat.

Merci d'avance

[Jean le Chauve]

Bonsoir,
Sans un lien vers la page en question, il est impossible de t'aider.
Sans doute un conflit js...

[clarajuliette]

je n'arrive pas à mettre de lien correctementcar un message d'erreur apparait...mais voilà l'url d'une des pages concernées :

leadumayet.com/index.php?page=2012-2013

[bess]

désolé pour l'erreur sur le lien, c'est une protection anti-spam

quand à ton problème : http://validator.w3.org/check?uri=http%3...ne&group=0

corrige les erreurs HTML (notamment title:"L") et retest

[Jean le Chauve]

Ton code n'est pas valide : http://validator.w3.org/check?verbose=1&...D2012-2013
et je ne vois pas la classe iframe.

Oups, Bess a été plus rapide.
Voici la doc de fancybox : http://fancybox.net/howto
En particulier le point 4 iframe.

[clarajuliette]

Je n'arrive pas à corriger les erreurs de mon code car quand je regarde les lignes citées par le validator, je ne retrouve pas les bugs dans mon code source. Pour ce qui est de la classe iframe, est-ce le code que je dois placer dans la balise head ? car, si oui, il me semble l'avoir placé...

[Jean le Chauve]

tu as une fermeture </a> de trop et tu as écris title:"L" au lieu de title="L"
De plus, tu as placé une div dans un <p>.
Sans avoir testé, voici ce que je pense que tu devrais avoir :

Code :

[== Indéfini ==]
<ul class="list">
    <li>
        <a class="fancybox fancybox.iframe" href="http://leadumayet.com/index.php?page=transi"><img src="http://leadumayet.com/uploads/images/1213/P1110378.jpg" title="transi" alt="transi" /><span id="sculpt1">Transi</span></a>
    </li>
    <li>
        <a class="fancybox fancybox.iframe" href="http://leadumayet.com/index.php?page=transi"><img src="http://leadumayet.com/uploads/images/1213/17310022%20copie.jpg" alt="sculp2" title="Fuite Suite"/><span id="sculpt2">Fuite Suite</span></a>
    </li>
    <li>
        <a class="fancybox fancybox.iframe" href="http://leadumayet.com/index.php?page=transi"><img src="http://leadumayet.com/uploads/images/1213/photo-1%20copie.jpg" alt="sculpt3" title:"lll" /><span id="sculpt3">L</span></a>
    </li>
</ul>

[clarajuliette]

Merci de votre réponse. J'ai essayé en remplaçant le code et en corrigeant les erreurs mais ça ne fonctionne toujours pas...pensez-vous que j'ai mal placé les codes dans la balise <script> du gabarit de la page ?

[Jean le Chauve]

Maintenant, tu as une erreur dans le js.
Je te donne le code que j'utilise pour afficher une googlemap dans une iframe comme tu peux le voir en cliquant sur l'image dans la sidebar : http://www.quiditmieux.be/contact

Code :

//a placer dans le contenu de ta page
{literal}
<script type="text/javascript">
$(document).ready(function() {
$("a.iframe").fancybox({
        'width': 600,
        'height': 600, 'speedIn': 1000, 'speedOut': 500, 'overlayShow': false
});
});
</script>
{/literal}
<p><a class="iframe" rel="popup- map" href="http://maps.google.fr/maps?q=rue+jean-baptiste+decock+5,+1080+bruxelles&amp;hl=fr&amp;sll=50.851404,4.328346&amp;sspn=0.006295,0.006295&amp;ie=UTF8&amp;view=map&amp;cid=14676627466693741403&amp;hq=rue+jean-baptiste+decock+5,+1080+bruxelles&amp;hnear=&amp;ll=50.851393,4.328399&amp;spn=0.009483,0.015042&amp;z=16&amp;iwloc=A&amp;output=embed"><img src="http://www.quiditmieux.be/uploads/images/qdmnew/plan.png" alt="Rue Jean-Baptiste Decock, 5 - 1080 Bruxelles - 02/2196545" width="219" height="178" /></a></p><p>Cliquez sur l'image pour voir le plan et calculer votre itinéraire.</p>

A placer dans la head et en supprimant tous les autres appels js :

Code :

[== Indéfini ==]
//à adapter avec les dernières versions des scripts.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://leadumayet.com/modules/JQueryTools/lib/fancybox.lib/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://leadumayet.com/modules/JQueryTools/lib/fancybox.lib/jquery.fancybox.css" media="screen" />

Sujet déjà dans le forum : voir http://www.cmsmadesimple.fr/forum/viewtopic.php?id=3319
et
http://www.cmsmadesimple.fr/forum/viewtopic.php?id=1792
A adapter aux nouvelles versions de JQuery et, de préférence, ne pas utiliser le module jquerytools, mais insérer vous-même les appels JQuery (jquery.min, fancybox.js et la css).

[clarajuliette]

Merci, tout fonctionne ! j'aurais juste une dernière question : comment puis-je déplacer le bouton permettant de fermer l'iframe dans le coin droit en haut ? il est actuellement dans le coin gauche du bas.

[Jean le Chauve]

Commence déjà par virer tous les appels js et css inutiles dans ta head comme indiqué dans mon post précédent et remonte les 3 scripts au-dessus de la fonction .
Le bouton de fermeture est géré dans la css de fancybox. Si tu n'y a pas touché, tu n'as sans doute pas la css qui convient à ta version de fancybox.