jquery - example - llamar a Fancybox en el padre del iframe
fancybox open (3)
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 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.
Consulte el tutorial: http://fancybox.net/howto. Si desea un tutorial similar en español, también puede consultar mi sitio.
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:
<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 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:
<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 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í
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
<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 padre tenemos derecho a un enlace señuelo (este es del ejemplo de cargar fancybox)
<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