caja de luz pantalla jQuery PrettyPhoto en padres iframe

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

  •  18-09-2019
  •  | 
  •  

Pregunta

Estoy usando jQuery 2.5.3 PrettyPhoto y me preguntaba cómo puedo conseguir la caja de luz para mostrar en la ventana padre de un iframe cuando se selecciona un enlace de imagen dentro del marco flotante?

Aquí está mi código:

página en el 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>

Cuando cargo a esta página en su propia caja de luz el trabaja muy bien.

código iframe: 

<html>
<head>
</head>

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

Sin embargo, cuando la carga hasta la página con el iframe y haga clic en el enlace de la imagen en la página que se encuentra en el iframe Quiero que la luz que se mostrará en la ventana principal y no en el marco flotante.

¿Fue útil?

Solución

Trate de este selector: $("#myid", top.document)

El top.document dice el selector para orientar el elemento myid cuales existe en el documento (página principal) más alta. Para que esto al trabajo, jQuery se debe cargar en el archivo que se ve a través de la iframe.

Fuente: http://groups.google .com / grupo / jquery-en / browse_thread / hilo / 5997ef4a60a123af? pli = 1

editar

Ok la única manera de que esto funcione es:

  1. Eliminar el siguiente código de su página real (inner.html, la contenida en el iframe): 

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

  2. En su página de iframe, añadir: 

    <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. También añada el siguiente código JS: 

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

Esto debería hacer el truco, pero entonces trabajará sólo para la página de marco flotante, y no directamente desde la página real.

Otros consejos

encontrado esto en alguna parte

<base target="_parent" />

ponerlo dentro de la cabeza de IFRAME

He resuelto el problema con el iframe usando copias de los datos. Ver el código de secuencias de comandos en la página principal: Nota: En mi código hay una imagen que se inicia la galería y la galería no es visible, la imagen es "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();
  });
});

El código HTML iframe es: 

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

Y el div en el la parte inferior de la página que recibe los datos copiados: 

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

he hecho pruebas para FF y IE y correr normalmente.

El código de cambios que he realizado han sido:

  • Ha añadido un nuevo ajuste de verdadero / falso en los ajustes que se inician en la línea 18. displayIframeContentsInParent: false es decir,

  • En torno a la línea 92 en el if(theGallery) si comprobación de bloque si el nuevo ajuste se ha establecido en true y si es así, buscar en el contenido de iframe en más imágenes en la galería: 

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

  • En torno a la línea 125 en la función de apertura: en el if($.browser.msie && $.browser.version == 6) si el bloque más, añada lo siguiente a ocultar también cuadros combinados en el iframe: 

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

  • Finalmente en torno a la línea 300 en la función de cierre: en el if($.browser.msie && $.browser.version == 6) si el bloque más, añada lo siguiente a hacer los cuadros combinados en el marco flotante visible de nuevo: 

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

Por supuesto, cuando se utiliza bastante foto ahora tendrá que establecer el nuevo valor a true para que se buscará el contenido de iframe en otras imágenes para mostrar es decir. 

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

He publicado un enlace a estos cambios en el foro de soporte PrettyPhoto así que espero, estos cambios quedan incorporadas a la fuente PrettyPhoto.

he terminado con esto: 

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

Se ve a través de todos los marcos flotantes en la página principal. JQuery dentro del código iframe no es necesario.

Eso es todo sobre el contenido del iFrame debe cargarse antes de intentar acceder a ella:

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

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top