web-dev-qa-db-fra.com

appeler Fancybox dans le parent d'iframe

J'ai 2 pages, mon index.html et social.html. J'ai nettoyé mon index et je n'ai laissé que le code nécessaire à jQuery pour fancybox Ce que j'essaie de faire, c'est d'avoir des images dans social.html. Lorsque vous cliquez dessus, cela ouvrirait fancybox et l'afficherait dans index.html. pas à l'intérieur de l'iframe. L'erreur qui se présente est la suivante:

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 la page IFrame:

 <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 -> ça vient de fancybox je n'ai pas fait ça.

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;
    });



});
jqueryhtmliframefancybox
10
Andres

Tout d’abord, vous devriez utiliser fancybox v2.x pour le faire de façon transparente (appliquer des correctifs à fancybox v1.3.x ne vaut pas la peine de l’effort).

Deuxièmement, vous devez avoir dans les deux pages, la page parent et la page iframed, les fichiers jquery et fancybox css et js chargés, afin de transcender correctement fancybox,

donc dans les 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>

alors dans votre page iframed (enfant) votre script est fondamentalement le même (mais avec les bonnes options de fancybox pour la version 2.x ... consultez la documentation ici )

$(".video").click(function() {
        $.fancybox({
            'padding'       : 0,
            // more options (v2.x) etc

mais au lieu de cela

        $.fancybox({

faire ceci:

        parent.$.fancybox({

alors fancybox s'affichera dans la page parente en dehors des limites de la page iframed

UPDATE: Page de démonstration ici

19
JFK

Étant donné que l'img est sur un iframe, sa page Web est différente. Donc, Jquery est sur index.html mais l’img ne le fait pas, c’est pourquoi JQuery ne peut pas accéder à l’image.

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

Sur la partie de script index.html

$(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 ajoutez l'ID à la déclaration d'iframe <iframe src =\"social.html \" id = "iframeID" etc ... reste de propriétés>

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

Consultez le didacticiel: http://fancybox.net/howto Si vous souhaitez un didacticiel similaire en espagnol, vous pouvez également consulter mon site.

1
H27studio