llamar a Fancybox en el padre del iframe

Tengo 2 páginas, mi index.html y social.html. Limpié mi índice y dejé solo el código 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 surge es:

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

este es mi index.html:

      function showImage(image) { $.fancybox(''); };       

en la página IFrame:

   

PD: ambas páginas están en el mismo dominio … EDITAR: video.js -> esto es de fancybox 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; }); }); 

En primer lugar, debe usar fancybox v2.x para hacer eso sin problemas (parchear fancybox v1.3.x no vale la pena el esfuerzo)

En segundo lugar, debe tener en ambas páginas, la página principal y la página iframed, los archivos jquery y fancybox css y js cargados para poder traspasar fancybox correctamente.

entonces en ambas páginas deberías tener al menos algo como:

  

y

   

luego, en su página iframed (hija), su script es básicamente el mismo (pero con las opciones correctas de fancybox para v2.x … consulte la documentación aquí )

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

pero en lugar de esto

  $.fancybox({ 

hacer esto:

  parent.$.fancybox({ 

entonces fancybox se mostrará en la página principal fuera de los límites de la página iframed

ACTUALIZACIÓN : página de demostración aquí

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 usando algo como esto … Pero no creo que funcione

En la parte del 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(); }); 

Y agregue el id a la statement iframe

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

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

He encontrado este problema antes y pude encontrar una solución. Esto es lo que hice. en mi página de iframe llamé a la ventana principal con href, por ejemplo, onClick="callMe('www.google.com')" o si las fotos “/images/pics.png” y llamo a este script en mi página principal

  

en mi html padre tenemos derecho a un enlace señuelo (este es del ejemplo de cargar fancybox)

    

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