appel Fancybox dans le parent de l'iframe

J'ai 2 pages, mon index.html et social.html. J'ai nettoyé mon index et n'ont laissé que le jquery, le code nécessaire pour fancybox Ce que je suis en train de faire est d'avoir des images à l'intérieur social.html et lorsqu'il est cliqué sur elle, il allait ouvrir fancybox et de la montrer, mais dans index.html pas à l'intérieur de l'iframe. L'erreur est:

Uncaught TypeError: Property 'showImage' of object [object DOMWindow] is not a function
(anonymous function)social.html:103
  onclick

c'est mon index.html:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript">
        function showImage(image) {
            $.fancybox('<img src="img/' + image + '" alt="" border="0" />');
        };
</script>

</head>

<body>
<iframe src="social.html" scrolling="no" border="0" width="579" height="505" allowtransparency="true"></iframe>
</body>
</html>

dans un IFrame page:

 <img src="img/picture1.jpg" alt="" class="thumbs" onclick="parent.showImage('picture1.jpg');"/>

PS: les deux pages sont sur le même domaine...
EDIT: video.js -> c'est à partir de fancybox je n'ai pas à le faire.

jQuery(document).ready(function() {

    $(".video").click(function() {
        $.fancybox({
            'padding'       : 0,
            'autoScale'     : false,
            'transitionIn'  : 'none',
            'transitionOut' : 'none',
            'title'         : this.title,
            'width'         : 640,
            'height'        : 385,
            'href'          : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type'          : 'swf',
            'swf'           : {
            'wmode'             : 'transparent',
            'allowfullscreen'   : 'true'
            }
        });

        return false;
    });



});

Il devrait fonctionner correctement.
c'est ce que je pensais, mais ce n'est pas elle garde me donne cette erreur :S
Qu'est ce qu'il y a à l'intérieur de js/video.js. Si ce js a aucune erreur de showImage fonction ne sera pas analysé par le navigateur JS moteur. Et dans ce cas uniquement, il va lancer cette erreur.
j'ai juste ajouté video.js code mais c'est directement à partir de fancybox je n'ai rien changé.
Voyez-vous de la JS erreur au chargement de la page dans la console?

InformationsquelleAutor Andres | 2012-01-13

20

Tout d'abord, vous devriez être en utilisant fancybox v2.x transparente de le faire (correctifs fancybox v1.3.x ne prend pas la peine de faire l'effort)

Deuxièmement, vous avez besoin d'avoir dans les deux pages, la page parent et l'iframed page, chargé fancybox jquery et css et js fichiers, dans le but de transcender fancybox correctement,

donc, dans ces deux pages, vous devriez avoir au moins quelque chose comme:
```
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />
```
et
```
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>
```
puis dans votre iframed (enfant) page de votre script de base est le même (mais avec le droit fancybox options pour v2.x ... consultez la documentation ici)
```
$(".video").click(function() {
        $.fancybox({
            'padding'       : 0,
            //more options (v2.x) etc
```
mais au lieu de cela
```
        $.fancybox({
```
ce faire:
```
        parent.$.fancybox({
```
puis fancybox s'afficher dans la page parent hors des limites de la iframed page

Mise à JOUR: Page de démonstration ici
- J'ai fatigué, téléchargez la version la plus récente de tout. Sur une seule page(iframe) si je viens de mettre $('.fancybox').fancybox(); cela fonctionne mais j'ai mis parent.$.('.fancybox').fancybox(); et il dit jeton inattendu, et si je mets parent.$('.fancybox').fancybox(); elle donne le même DOM erreur :S
- Eh bien, si vous êtes fatigué, puis il n'y a rien que nous pouvons faire (je me demande pourquoi vous avez demandé de l'aide)... mais si vous ne réalisez pas la "dernière version" de tout ce qui est censé améliorer le logiciel que vous utilisez et corriger les bugs existants. Nous ne sommes pas de vous donner des ordres, nous vous donnons des idées pour résoudre votre problème... (y si no quieres, pues n'y mucha suerte alors)
- Je suis désolé, c'était une faute de frappe je voulais dire "j'ai essayé ce" je ne serait jamais mettre ou de ne pas apprécier l'aide accordée. J'ai essayé de faire plusieurs choses en même temps et je sais que vous avez passé votre précieux temps pour m'aider et je ne voulais pas vous laisser suspendus sans réponse si cela a fonctionné ou pas. Et bien sûr d'avoir la dernière de n'importe quoi est mieux b/c de la plupart des bugs sont supprimés n'avez pas de problème avec qui que ce soit. Tout cela juste une faute de frappe 🙂
- OK, pas de problème, pas de dégâts. C'est drôle comment une faute de frappe peuvent transformer quelque chose d'une manière complètement différente. S'il vous plaît laissez-moi savoir si la solution a fonctionné ou pas. Si elle le faisait, s'il vous plaît n'oubliez pas de cocher la réponse correcte). Si non je vais vous poster un exemple vivant que vous pouvez utiliser comme référence.
- je sais, mais jusqu'à présent, j'ai essayé et n'avez pas été en mesure de le faire fonctionner, j'ai même essayé avec la démo que j'ai téléchargé à partir de fancybox, si vous pouviez mettre une démo en live ce serait aider à franchir ce cap qui a tourné à partir d'une bosse de la montagne lol
- Là vous allez: picssel.com/playground/jquery/fancyboxFromIframe_16Jan12.html .... n'oubliez pas de vérifier le code source de la page parent et l'iframed page (et n'oubliez pas de vérifier que cette réponse est la bonne 😉
- MERCI!!!!! vous savez ce que je pense que c'était avant? J'ai été le tester hôte local et comme maintenant j'ai copié exactement ce que vous avez eu et n'aurait toujours pas de travail, alors j'ai téléchargé et ça a fonctionné!! fou hein? mais merci beaucoup!
- Le parent.$.fancybox({ ne fonctionne pas sur le localhost. Il a travaillé quand j'ai gardé le même code sur le serveur live.
- avec les parents.$.fancybox ({...}), le parent fancybox est en cours de fermeture.est-il possible que la mère et l'enfant restent ouverts jusqu'à ce que le faire de manière explicite.
- fait référence à la page qui contient le iframe où la fancybox sera lancé à partir de. Sinon, je ne suis pas sûr de ce que vous demandez, désolé
InformationsquelleAutor JFK
1

Depuis l'img est sur un iframe est une autre page web. Si Jquery est sur index.html mais l'img ne marche pas, c'est pourquoi JQuery ne peux pas obtenir à l'image.

Peut-être en utilisant quelque chose comme ça... Mais je ne pense pas que cela fonctionnerait

Sur index.html partie de script
```
$(document).ready(function () {
    //function to active fancybox on the thumbs class inside the iframe
    //Not sure it works on iframes, probably it doesnt.
    $("#iframeID.thumbs").fancybox();
});
```
Et ajouter l'id de l'iframe déclaration
< iframe src=\"social.html\" id="iframeID" etc... reste de propriétés>

Mais, mon conseil est d'utiliser des divs au lieu de les iframes.
Vous devez également supprimer le onclick de l'image pour les non obstrusive Javascript.

Vérifier le tutoriel: http://fancybox.net/howto
Si vous voulez un tutoriel similaire en espagnol, vous pouvez consulter mon site aussi.

InformationsquelleAutor H27studio
1

Ive rencontre ce problème avant et a été en mesure de trouver une solution. Voici ce que iv fait.
dans mon iframe page, j'ai appelé la fenêtre parente avec le href p. ex.
onClick="callMe('www.google.com')" ou si "photos/images/photos.png"
et d'appeler ce script dans ma page parent
```
<script type="text/javascript"> 
 function callMe(site){ 
      $(".sample").fancybox({ 
         'width' : '97%', 
         'height' : '97%', 
         'href' : ''+site+'' //force href to change its site from the call function in the iframe page 
      }); 
      readyFancy() call to trigger the decoy link page 
 } 

 function readyFancy(){ 
      $("a.sample").trigger("click"); 
 } 
 </script> 
```
dans mes parent html nous avons droit un leurre lien (celui-ci est à partir de l'exemple de la charge fancybox)
```
<body> 
<a href="#" class="sample"></a> 
</body> 
```
Vous pouvez télécharger un exemple ici..
https://docs.google.com/file/d/0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDczLWE2YjQtODNlMjU4YTNjYWI0/edit?authkey=CP_H9rAC
- Il vaut la peine de mentionner que votre solution est pour fancybox v1.3.4 et il est utile pour les gens qui ne veulent pas de mise à niveau. Avec ma proposition de solution à l'aide de v2.x, l'avantage est que vous n'avez pas besoin de modifier l'original fancybox fichiers et que votre script fonctionne toujours avec les futures mises à jour de fancybox.
- JFK, je ne savais pas que vous avez déjà de l'inclure dans votre mise à niveau. De toute façon je vous remercie beaucoup de nous donner fancybox.
- Je n'ai pas de développer Fancybox ... Janis est l'homme stackoverflow.com/users/486595/janis
InformationsquelleAutor drexsien

Vous devez vous connecter pour publier un commentaire.