Display jquery prettyphoto Lightbox In genitore iframe

StackOverflow https://stackoverflow.com/questions/1483227

  •  18-09-2019
  •  | 
  •  

Domanda

Sto usando jQuery prettyphoto 2.5.3 e mi chiedevo come posso ottenere la finestra di luce da visualizzare nella finestra padre di un iframe quando si seleziona un collegamento immagine all'interno del iframe?

Ecco il mio codice:

pagina nella iframe: 

<html>
<head>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
    <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
</head>

<body>
    <a href="animage.jpg" rel="prettyPhoto">
                <img src="animage.jpg" height="200" width="200"/>
    </a>
            <script type="text/javascript" charset="utf-8">
              $(document).ready(function(){
                 $("a[rel^='prettyPhoto']").prettyPhoto();
              });
    </script>
</body>

Quando carico questa pagina sul proprio alla lightbox funziona bene.

codice iframe: 

<html>
<head>
</head>

<body>
    <iframe src="inner.html"/>
</body>
</html>

Tuttavia, quando carico la pagina con l'iframe e fare clic sul link immagine nella pagina che si trova nella iframe voglio la lightbox per visualizzare nella finestra principale e non nella iframe.

È stato utile?

Soluzione

Prova questo selettore: $("#myid", top.document)

Il top.document dice al selettore di indirizzare l'elemento che myid esiste nel documento (pagina genitore) più in alto. Affinché questo al lavoro, jQuery deve essere caricato nel file che viene osservato attraverso il iframe.

Fonte: http://groups.google .com / gruppo / jquery-it / browse_thread / thread / 5997ef4a60a123af? pli = 1

Modifica

Ok l'unico modo questo lavoro è il seguente:

  1. Rimuovi il seguente codice dalla pagina reale (inner.html, quella contenuta nella iframe): 

    <script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
         $("a[rel^='prettyPhoto']").prettyPhoto();
      });

  2. Ora nella tua pagina iframe, aggiungi: 

    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>

  3. Si aggiungano anche il seguente codice JS: 

    $(function() {
    $("iframe").contents().find("a[rel^='prettyPhoto']").click(function() { $(this).prettyPhoto(); return false; } );
});

Questo dovrebbe fare il trucco, ma sarà poi solo lavorare per la pagina di iframe, e non direttamente dall'interno della pagina vera e propria.

Altri suggerimenti

trovato questo da qualche parte

<base target="_parent" />

metterlo dentro la testa di IFRAME

ho risolto il problema con l'iframe utilizzando copie di dati. Vedere il codice di script a Pagina principale: Nota: Nel mio codice v'è un'immagine che inizia la galleria e la galleria non è visibile, l'immagine ID è "btngaleria". 

$("#iPrincipal").load(function(){
  $("#iPrincipal").contents().find("#btngaleria").click(function() { 
    var temp=$("#iPrincipal").contents().find("#galeria").html();
    $("#galeria").html(temp);
    $("#galeria:first a[rel^='prettyPhoto']").prettyPhoto({animationSpeed:'slow',slideshow:4000, autoplay_slideshow: true});
    $("#galeria li:first a").click();
  });
});

Il codice iframe HTML è: 

<iframe src="home.asp" name="iPrincipal" id="iPrincipal" frameborder="0" width="100%" height="540"></iframe>

E il div alla parte inferiore della pagina che riceve i dati copiati: 

<div id="falso" style="display:none; visibility:hidden"><ul id="galeria" class=""></ul></div>

Ho fatto dei test per FF e IE e funzionare normalmente.

Il codice modifica che ho fatto sono stati:

  • Aggiunta una nuova impostazione di vero / falso nelle impostazioni che iniziano sulla linea 18. vale a dire displayIframeContentsInParent: false,

  • intorno alla linea 92 nel if(theGallery) se il controllo di blocco se la nuova impostazione è stata impostata su true e in caso affermativo, la ricerca di contenuti iframe per altre immagini nella galleria: 

    if(settings.displayIframeContentsInParent)
{
   $("iframe").contents().find('a[rel*='+theGallery+']').each(function(i) {
      if($(this)[0] === $(link)[0]) setPosition = i;
 images.push($(this).attr('href'));
 titles.push($(this).find('img').attr('alt'));
 descriptions.push($(this).attr('title'));
   });
}

  • intorno alla linea 125 nella funzione aperta: nel if($.browser.msie && $.browser.version == 6) se blocco else, aggiungere il seguente per nascondere anche le caselle combinate nella iframe: 

    if(settings.displayIframeContentsInParent)
{
    $("iframe").contents().find('select').css('visibility','hidden');
}

  • Infine sulla intorno alla linea 300 nella funzione di chiusura: nel if($.browser.msie && $.browser.version == 6) se blocco else, aggiungere il seguente per rendere le caselle combinate nella iframe di nuovo visibile: 

    if(settings.displayIframeContentsInParent)
{ 
  $("iframe").contents().find('select').css('visibility','visible');
}

Naturalmente, quando si utilizza abbastanza foto adesso è necessario impostare la nuova impostazione su true in modo che cercherà il contenuto iframe per altre immagini per visualizzare cioè. 

$("a[rel='prettyphoto']").each(function() {
  $(this).prettyPhoto(displayIframeContentsInParent: true);
});

Ho inviato un link a questi cambiamenti nel forum di supporto prettyphoto così si spera, questi cambiamenti avranno incorporate nella fonte prettyphoto.

Ho finito con questo: 

<script type="text/javascript">
    $('iframe').load(function(){
    $(this).contents().find("a[rel^='prettyPhoto']").prettyPhoto();
    });
</script>

Si guarda attraverso tutti i iframe sulla pagina principale. JQuery all'interno del codice di iframe non è necessaria.

Questo è tutto sul contenuto di iFrame deve essere caricato prima di tentare di accedervi:

http://grasshopperpebbles.com/ajax/using-jquery -to-access-iframe-content /

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top