llamar a Fancybox en padre desde 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 estoy tratando de hacer es tener imágenes dentro de social.html y cuando hago clic en él, abre fancybox y lo muestra, pero en index.html no dentro del iframe. . El error que sale es:
Uncaught TypeError: Property 'showImage' of object [object DOMWindow] is not a function
(anonymous function)social.html:103
onclick
este 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');"/>
PD: ambas 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;
});
});
Primero, deberías usar fancybox v2.x para hacerlo sin problemas (parchear fancybox v1.3.x no vale la pena)
En segundo lugar, debe tener en ambas páginas, la página principal y la página iframe, archivos jquery y fancybox css y js cargados para poder trascender fancybox correctamente.
entonces en ambas páginas deberías tener al menos algo como:
<link rel="stylesheet" type="text/css" href="fancybox2.0.4/jquery.fancybox.css" />
y
<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 iframe (secundaria), su secuencia de comandos es básicamente la misma (pero con las opciones de fancybox correctas 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í
Me encontré con 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 llamé a este script en mi página principal
<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 principal corrigimos un enlace señuelo (este es del ejemplo al cargar fancybox)
<body>
<a href="#" class="sample"></a>
</body>
Puede descargar un ejemplo funcional aquí. https://docs.google.com/file/d/0B1TI7BdxGAbvYzBiZjNiMDYtNjY4ZS00NDczLWE2YjQtODNlMjU4YTNjYWI0/edit?authkey=CP_H9rAC
