llamada Fancybox en el padre de iframe

Tengo 2 páginas, mi index.html y social.html. Limpié mi índice y dejé solo el código de jquery necesario para fancybox Lo que trato de hacer es tener imágenes dentro de social.html y cuando se hace clic en él, se abriría fancybox y se mostraría pero en index.html no dentro del iframe . El error que aparece es:llamada Fancybox en el padre de iframe

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

esta es mi 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>

en la página Iframe:

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

PS: las dos páginas están en el mismo dominio ... EDITAR: video.js -> esto es de fancybox Yo no hice esto.

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



});

Fuente

2012-01-13 Andres

que debería funcionar bien. – ShankarSangoli

eso es lo que yo pensaba, pero no me sigue dando ese error: S – Andres

¿Qué hay dentro 'js/video.js'. Si este js tiene algún error, la función 'showImage' no será analizada por el motor JS del navegador. Y solo en ese caso lanzará este error. – ShankarSangoli

En primer lugar, usted debe utilizar v2.xy FancyBox hacer perfectamente que (parches v1.3.x FancyBox no vale la pena el esfuerzo)

En segundo lugar, es necesario tener en ambas páginas, la página principal y la página de iframes, cargado archivos de jQuery y CSS y JS FancyBox para trascender FancyBox correctamente,

por lo que en las dos páginas que debe tener al menos algo como:

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

Luego, en su página iframed (secundaria), su script es básicamente el mismo (pero con las opciones de fancybox correctas para v2.x ...check the documentation here)

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

pero en lugar de esto

 $.fancybox({

hacer esto:

 parent.$.fancybox({

continuación FancyBox se mostrará en la página principal de los límites de la página iframes

ACTUALIZACIÓN: Demo page here

Fuente

2012-01-13 18:30:30 JFK

Me cansé de esto, descargué la última versión de todo. En la página única (iframe) si acabo de poner $ ('. Fancybox'). Fancybox(); funciona pero luego puse parent. $. ('. fancybox'). fancybox(); y dice token inesperado, y si pongo parent. $ ('. fancybox'). fancybox(); da el mismo error DOM: S – Andres

Bueno, si estás cansado, entonces no hay nada que podamos hacer (así que me pregunto por qué pediste ayuda) ... pero si no te das cuenta de que la "última versión" de todo se entiende para mejorar el software que está utilizando y corregir errores existentes. No te estamos dando órdenes, te estamos dando ideas para resolver tu problema ... – JFK

Lo siento, fue un error tipográfico que quise decir "Probé esto", lo haría nunca depongas o no aprecies la ayuda que se brinda. Intentaba hacer varias cosas al mismo tiempo y sé que pasaste tu valioso tiempo dándome ayuda y no quería dejarte colgando sin una respuesta, funcionara o no. Y, por supuesto, tener lo último de cualquier cosa es mejor porque la mayoría de los errores se eliminan. Tampoco tiene un problema con eso. Todo esto es solo un error tipográfico :) – Andres

Como el img está en un iframe es una página web diferente. Entonces Jquery está en index.html pero el img no lo hace, por eso JQuery no puede acceder a la imagen.

Tal vez el uso de algo como esto ... Pero yo no creo que funcionaría

Por parte de la escritura 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(); 
});

Y añadir el ID de la declaración iframe < iframe src = \ "social.html \" id = "iframeID" etc ... resto de propiedades>

Pero, mi consejo es usar divs en lugar de iframes. También debe eliminar el onclick de la imagen para un Javascript no obstrusivo.

Compruebe el tutorial: http://fancybox.net/howto Si quiere un tutorial similar en español, puede consultar también mi sitio.

Fuente

2012-01-13 16:41:31 H27studio

He encontrado este problema antes y he podido encontrar una solución. Esto es lo que hice. en mi página de iframe llamé a la ventana principal con href, p. Ej. onClick="callMe('www.google.com')" o si las fotografías "/images/pics.png" y llamar a este script en mi página 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>

en mi html padres que la derecha un enlace señuelo (éste es el ejemplo de FancyBox carga)

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

puede descargar un ejemplo de trabajo aquí .. https://docs.google.com/file/d/0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDczLWE2YjQtODNlMjU4YTNjYWI0/edit?authkey=CP_H9rAC

Fuente

2012-02-29 11:41:55 andsien

Vale la pena mencionar que su solución es para fancybox v1.3.4 y es útil para las personas que no desean actualizar. Con mi solución propuesta utilizando v2.x, la ventaja es que no lo hace Necesito modificar los archivos originales de fancybox y que su script aún funcionará con futuras actualizaciones de fancybox. – JFK

@JFK ... gracias JFK. No me di cuenta de que ya lo incluyó en su actualización. De todos modos muchas gracias por darnos fancybox. – andsien

No desarrollé Fancybox ... Janis es el hombre http://stackoverflow.com/users/486595/janis – JFK

llamada Fancybox en el padre de iframe

Respuesta

Cuestiones relacionadas