chiama Fancybox in parent from iframe

Ho 2 pagine, il mio index.html e social.html. Ho pulito il mio indice e lasciato solo il codice jquery necessario per fancybox Quello che sto cercando di fare è avere immagini all'interno di social.html e quando cliccato su di esso, si aprirà fancybox e lo mostrerà ma in index.html non all'interno dell'iframe . L'errore che viene in su è:chiama Fancybox in parent from iframe

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

questo è il mio 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>

nella pagina IFrame:

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

PS: entrambe le pagine sono sullo stesso dominio ... EDIT: video.js -> questo è da fancybox non l'ho fatto.

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



});

fonte

2012-01-13 Andres

dovrebbe funzionare bene. – ShankarSangoli

questo è quello che ho pensato ma non continua a darmi quell'errore: S – Andres

Cosa c'è dentro 'js/video.js'. Se questo js ha qualche errore della funzione 'showImage' non verrà analizzato dal motore JS del browser. E solo in quel caso verrà generato questo errore. – ShankarSangoli

In primo luogo, si dovrebbe utilizzare fancybox v2.x fare senza soluzione di continuità che (patch fancybox La versione 1.3.x non vale la pena)

In secondo luogo, è necessario avere in entrambe le pagine, la pagina padre e la pagina iframed, caricati i file jQuery e fancybox CSS e JS per trascendere fancybox correttamente,

così in entrambe le pagine si dovrebbe avere almeno qualcosa di simile:

<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="fancybox2.0.4/jquery.fancybox.js"></script>

quindi nella pagina iframed (figlio) lo script è praticamente lo stesso (ma con le giuste opzioni di fancybox per v2.x ...check the documentation here)

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

ma invece di questo

 $.fancybox({

fare questo:

 parent.$.fancybox({

poi fancybox mostrerà nella pagina padre fuori i confini della pagina iframed

UPDATE: Demo page here

fonte

2012-01-13 18:30:30 JFK

Mi stanco, scarica l'ultima versione di tutto. Nella pagina singola (iframe) se ho appena messo $ ('. Fancybox'). Fancybox(); funziona ma poi metto genitore. $. ('. fancybox'). fancybox(); e dice token inaspettato, e se metto genitore. $ ('. fancybox'). fancybox(); dà lo stesso errore DOM: S – Andres

Beh, se sei stanco, allora non c'è nulla che possiamo fare (quindi mi chiedo perché hai chiesto aiuto) ... ma se non ti rendi conto che "l'ultima versione" di tutto è per migliorare il software che stai utilizzando e correggere i bug esistenti. Non ti stiamo dando degli ordini, ti stiamo dando delle idee per risolvere il tuo problema ... (sì, non è vero, – JFK

Mi dispiace che fosse un refuso volevo dire "Ho provato questo" vorrei mai smettere o non apprezzare l'aiuto che viene dato. Stavo provando a fare diverse cose contemporaneamente e so che hai speso il tuo tempo prezioso dandomi aiuto e non volevo lasciarti sospeso senza una risposta, indipendentemente dal fatto che funzionasse o no. E ovviamente avere l'ultima di tutto è meglio che la maggior parte dei bug vengano rimossi, non avere un problema con quello. Tutto questo solo un errore di battitura :) – Andres

Poiché l'img è su un iframe è una pagina Web diversa. Quindi Jquery è su index.html ma img non funziona, ecco perché JQuery non riesce a raggiungere l'immagine.

Forse usando qualcosa di simile ... Ma io non credo che avrebbe funzionato

Su index.html parte sceneggiatura

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

E aggiungere l'id alla dichiarazione iframe < iframe src = \ "social.html \" id = "iframeID" ecc ... resto delle proprietà>

Ma, il mio consiglio è di usare divs invece di iframe. Dovresti anche rimuovere l'onclick dall'immagine per Javascript non-ostruente.

Controllare il tutorial: http://fancybox.net/howto Se si desidera un tutorial simile in spagnolo, è possibile controllare anche il mio sito.

fonte

2012-01-13 16:41:31 H27studio

Ive ha riscontrato questo problema prima ed è stato in grado di trovare una soluzione. Ecco cosa ha fatto. nella mia pagina iframe ho chiamato la finestra genitore con href e.g. onClick="callMe('www.google.com')" o se le foto "/images/pics.png" e chiamano questo script nella mia pagina padre

<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>

nel mio html genitori abbiamo destra un link decoy (questo è da l'esempio a carico fancybox)

<body> 
<a href="#" class="sample"></a> 
</body>

È possibile scaricare un esempio di lavoro qui .. https://docs.google.com/file/d/0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDczLWE2YjQtODNlMjU4YTNjYWI0/edit?authkey=CP_H9rAC

fonte

2012-02-29 11:41:55 andsien

Vale la pena menzionare che la tua soluzione è per fancybox v1.3.4 ed è utile per le persone che non vogliono aggiornare. Con la mia soluzione proposta utilizzando v2.x, il vantaggio è che non si ' Ho bisogno di modificare i file originali di fancybox e il tuo script funzionerà ancora con gli aggiornamenti futuri di fancybox. – JFK

@JFK ... grazie JFK non mi rendevo conto che lo hai già incluso nel tuo aggiornamento. Comunque grazie mille per averci dato fancybox. – andsien

Non ho sviluppato Fancybox ... Janis è l'uomo http://stackoverflow.com/users/486595/janis – JFK

chiama Fancybox in parent from iframe

risposta

Problemi correlati