lightbox en iframe (imagen)

Mikele777 · #1 (**permalink**) 26/09/2007, 00:49

Hola,

Estoy intentando abrir una imagen, mediante lightbox, que está dentro de un iframe i el efecto me aparece dentro del iframe, no en la página principal. He estado buscando pero no encuentro el modo para hacer que al pichar un enlace que está dentro de un iframe, la imagen a mostrar se vea en la página "madre" y no dentro del iframe.

Si alguien se ha encontrado con esto y lo ha podido solucionar, agradecería la ayuda.

Muchas gracias de antemano!

Miquel

lagunafmr · #2 (**permalink**) 26/09/2007, 04:37

Con lytebox puedes hacer el efecto en los iframes.

http://www.dolem.com/lytebox/

Saludos.

Mikele777 · #3 (**permalink**) 26/09/2007, 09:46

Perfecto, había probado mil y una versiones de lightbox..., pero esta que dices va de perlas.

Muchísimas gracias!!

Saludos

SidV · #4 (**permalink**) 11/11/2007, 14:56

Lightbox te permite configurar el enlace?
Es decir, nose cual script de todos los "lightbox" que existen tenes vos... (o usas vos), pero si te permite cambiar el "target" ... podes hacer que salga fuera del iframe...

(Creo, todavia no lo probe) :(

rouga · #5 (**permalink**) 18/07/2008, 00:49

Hola yo tambien tengo el mismo problema entre a lytebox y sobre las iframes viene citado esto :

iFrames: If you plan to use Lytebox in an iFrame environment, then you need to include lytebox.css in the parent document, while including lytebox.js in the iFrame document.

incluyo dentro de head el archivo .js dentro de mi archivo ke tiene el iframe
y el .css lo inclui en el head de la pagina ke esta dentro del iframe ke kontiene las imagenes, pero no pasa nada no veo cambo ke estoy hacinedo mal?

hawk007 · #6 (**permalink**) 04/05/2009, 02:17

Alguien a encontrado la solución?

Es que he provado con el lytebox y poniendo un rel="_self" con lightbox pero sigue haciendo el efecto solo en el frame que se encuentra.

gracias!

dnlrecords · #7 (**permalink**) 25/05/2009, 17:48

a mi me funciono con lytebox 3.22, se coloca el codigo de la css y del js en ambas, en la web madre y en la quee staba dentro del iframe,
funciona bien con IE y firefox, otros navegadores, no cacho,
saludos

malvavisc0 · #8 (**permalink**) 08/07/2009, 15:44

Hola!
Estoy intentando utilizar el LyteBox pero lo que pasa es que mi link esta dentro de un flash y el flash a su vez esta dentro de un iframe...
Osea tengo un boton en flash el cual va a llamar una imagen pero la imagen igual quiero que salga en la pagina "Madre"
Alguien tiene idea de como se hace con LyteBox?
Ya intente con Lightbox que fue donde encontre un ejemplo de como hacerlo desde flash pero no se como implementarlo para Lytebox porke no tiene los mismos parametros.
Porfavor ayudenmeee! =)

Rodrigoxxx · #9 (**permalink**) 31/10/2009, 10:33

Esitimados...

Sufría con el mismo problema, frsutrado, a punto de tirar la toalla encontré la solución.

Deben ponerse los códigos del lytebox como dice la leyenda de dolem.com/lytebox/,
el código del .css en el archivo madre que contiene el Iframe, y el código enlazado al .js en el archvo html que es el contenido del iframe.

El detalle es que debe ponerse dentro del código del archivo madre en la parte del Iframe la siguiente línea:

name="DisplayFrame"

entonces nuestro código de iframe en la página madre queda de la siguiente forma:

<iframe name="DisplayFrame" src="MIIFRAME.html" frameborder="0" allowtransparency="yes" width="325" height="204"></iframe>

En el archivo html que "es" el iframe (MIIFRAME.html, como en el ejemplo), ponemos el código que nos pide lytebox para funcionar en la imagen o vinculo:

<a href="MiImagen.jpg" rel="lytebox">

la imagen "MiImagen.jpg" debe estar en la misma carpeta donde estén ubicado el "MIIFRAME.html"

Eso es, la clave esta en name="DisplayFrame"

Espero haber ayudado y quitado muchos dolores de cabeza.

Saludos Cordiales

Rodrigo de las Riberas H.
factoriapublicidad.cl

ultrante · #10 (**permalink**) 16/02/2010, 10:35

Hola:

Gracias por los aportes, me sirvieron bastante, siguiendo los pasos como los indica Rodrigo se logra fácilmente cargar las imágenes colocadas en un ifreame en la pagina madre, lytebox es sumamente bueno. una excelente alternativa a lightbox si lo que se busca es cargar imágenes desde un ifreame

solo una cosa, yo no tuve que poner las imágenes en el mismo directorio del html que alberga el contenido del iframe, las conserve en la carpeta de imágenes donde estaban y funcionaron perfecto, por lo demás Rodrigo lo explico todo mas claro que agua.

Adios

Cita:

Iniciado por Rodrigoxxx

Esitimados...

Sufría con el mismo problema, frsutrado, a punto de tirar la toalla encontré la solución.

Deben ponerse los códigos del lytebox como dice la leyenda de dolem.com/lytebox/,
el código del .css en el archivo madre que contiene el Iframe, y el código enlazado al .js en el archvo html que es el contenido del iframe.

El detalle es que debe ponerse dentro del código del archivo madre en la parte del Iframe la siguiente línea:

name="DisplayFrame"

entonces nuestro código de iframe en la página madre queda de la siguiente forma:

<iframe name="DisplayFrame" src="MIIFRAME.html" frameborder="0" allowtransparency="yes" width="325" height="204"></iframe>

En el archivo html que "es" el iframe (MIIFRAME.html, como en el ejemplo), ponemos el código que nos pide lytebox para funcionar en la imagen o vinculo:

<a href="MiImagen.jpg" rel="lytebox">

la imagen "MiImagen.jpg" debe estar en la misma carpeta donde estén ubicado el "MIIFRAME.html"

Eso es, la clave esta en name="DisplayFrame"

Espero haber ayudado y quitado muchos dolores de cabeza.

Saludos Cordiales

Rodrigo de las Riberas H.
factoriapublicidad.cl

mofletero · #11 (**permalink**) 04/08/2010, 05:59

Hola, acabo de ver estas consultas y quiera preguntarles algo.
No me queda claro como es eso de incluir en el encabezado el .js y el .css.
¿Alguien podría darme un ejemplo?
Yo no tengo iframe, tengo una página principal con frameset que contiene dos frames, y me resulta algo confusa la explicación.

Este es el código de mi página "madre":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>.....::::: EIS :::::.....::::: Organización de eventos :::::.....</title>
</head>
<frameset rows="405,159*" cols="*" framespacing="0"" frameborder="NO" border="0">
<frame src="top_rojo.htm" name="mainFrame" scrolling="no" id="mainFrame" title="topFrame" />
<frame src="bienvenidos.htm" name="bottomFrame" id="abajo" title="mainFrame" />
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>

Mil gracias y perdón por mi ignorancia.
Saludos!!

rodrigodlr · #12 (**permalink**) 09/08/2010, 20:11

Hola amigo,

Primero, te recomiendo que le saques las lineas de arriba que te da el dreamweaver

"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">"

y solo dejes <html>
<head>

luego, el lytebox es un efecto para ampliar fotos en una galeria de imagenes puestas en un html...aca te detallan como hacerlo, si no estas usando i frame es mucho mas facil...

www.dolem.com/lytebox

Chekealo, si tienes alguna duda, avisa

Saludos

Rodrigo de las Riberas H.

mofletero · #13 (**permalink**) 10/08/2010, 03:59

Hola Rodrigo! Gracias por responder! Te cuento que he leído la explicación que me sugerís, pero no me doy cuenta como es eso de incluir en el encabezado el .js y el .css. como menciona. "iFrames: If you plan to use Lytebox in an iFrame environment, then you need to include lytebox.css in the parent document, while including lytebox.js in the iFrame document. "
La verdad es que no entiendo como hacerlo. Puedo hacerlo si deseo que se abra en una sola página, pero no en el frameset completo. ¿Podrías ayudarme?
Mil gracias por tu tiempo.

Un abrazo

rodrigodlr · #14 (**permalink**) 10/08/2010, 21:50

Hola Mofle,

Por lo que sé, el lytebox funciona para IFRAMES, que no sería lo mismo que "frameset"...pero una de esas, funciona igual.

En el archivo madre pones este codigo entre <head> y </head>

<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />

Luego, en la pagina o "subarchivo" llamado en el frameset poner, entre <head> y </head>:

<script type="text/javascript" language="javascript" src="lytebox.js"></script>

y a la imagen que quieres que sea boton, que al hacer clik se agrande, pones al lado del a href= pones rel=lytebox, quedaría asi por ejemplo:

<a href="miImagen.jpg" rel="lytebox">

Ahora, cuando se esta usando IFRAMES se pone en el iframe que está en la pagina madre

name="DisplayFrame"

...pero en el caso de frameset, no sabría donde poner este "DisplayFrame", por que es para uso exclusivo con iframes, que no es lo mismo...

quizas funcione agregando el

name="DisplayFrame"

por ahi, donde esta tu frameset

<frameset cols="*,80" frameborder="no" border="0" framespacing="0" name="DisplayFrame"> por ejemplo...podrias probar asi...

o

intentalo poniendo los codigos que te decia en el head y head, a ver si resulta asi sin tener que poner el "DisplayFrame"...si no, quizas tengas que buscar otra alternativa si quieres que la pantalla se te oscurezca entera...no se como funciona el "lightbox" en estos casos, que es el efecto original para este tipo de galerias...

Suerte!

Rodrigo

hamobe · #15 (**permalink**) 10/10/2010, 16:59

hola como estan

tengo una duda, lo que pasa es que estoy usando lytebox e iframes,

el caso es el siguiente la pagina principal contiene un iframe y desde el iframe se carga una pagina con un link que es el que carga (un formulario) desde el lytebox, pero al pasar las variables del formulario al iframe no me cierra el lytebox

alguien tiene una soliucion a este detalle se los agradeceria mucho

luigyalfred · #16 (**permalink**) 18/08/2011, 10:45

hola, los contextualizo, estoy montando un fancybox en mi pagina , la custión es que este se carga a través de un slide (nivoslide) que esta llamdao desde in iframe, ocurre que el fancybox me esta cargando dentro del iframe, pero quiero que carge fuera., les adjunto aqui el codigo que estoy utilizando

Código HTML:

<link rel="stylesheet" type="text/css" href="/pls/portal/docs/PAGE/WEBBOG/CONTENIDO/NOADMIN/OBJ_HEADER/FANCYBOX/JQUERY.FANCYBOX-1.3.4.CSS" media="screen" />
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
<div class="slider-wrapper theme-default">
  <div id="slider" class="nivoSlider">
  
   <!--banner uno-->
 <a id="various4" class="extLink" rel="lyteframe" title="Banquear" rev="width:900; height:500; scrolling:auto;" href="http://intraweb.ath.net.co:9051/pls/portal/docs/PAGE/WEBBOG/CONTENIDO/ADMIN/MINISITES/banquear.swf"><img src="/pls/portal/docs/PAGE/WEBBOG/CONTENIDO/ADMIN/BANNERS/01_BANCAPERSONAS.JPG" alt="" /></a>
  <!--banner dos-->
  <img src="/pls/portal/docs/PAGE/WEBBOG/CONTENIDO/ADMIN/BANNERS/02_BANCAINFANTIL.JPG" alt=""  /> 
  <!--banner tres-->
  <img src="/pls/portal/docs/PAGE/WEBBOG/CONTENIDO/ADMIN/BANNERS/03_BANCAJOVEN.JPG" alt="" />
  <!--banner cuatro-->
  <img src="/pls/portal/docs/PAGE/WEBBOG/CONTENIDO/ADMIN/BANNERS/04_BANCAADULTO_MAYOR.JPG" alt=""  /> 
  <!--banner cinco-->
  <img src="/pls/portal/docs/PAGE/WEBBOG/CONTENIDO/ADMIN/BANNERS/07_BANCA-MICROEMPRESA.JPG" alt="" />
  <!--banner seis-->
  <img src="/pls/portal/docs/PAGE/WEBBOG/CONTENIDO/ADMIN/BANNERS/08_BANCA-MICROFINANZAS.JPG" alt="" />
  
   </div>
</div>
<script type="text/javascript" src="/pls/portal/docs/PAGE/WEBBOG/CONTENIDO/NOADMIN/OBJ_HEADER/JQUERY-1.6.1.MIN.JS"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
<script>
		!window.jQuery && document.write('<script src="jquery-1.6.1.min.js"><\/script>');
	</script>
<script type="text/javascript" src="./scripts/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="/pls/portal/docs/PAGE/WEBBOG/CONTENIDO/NOADMIN/OBJ_HEADER/FANCYBOX/JQUERY.FANCYBOX-1.3.4.PACK.JS"></script>
<script type="text/javascript">
		$(document).ready(function() {
																																
			/*
			*   Examples - various
			*/
			$("#various4").fancybox({
				'padding'			: 0,
				'width'				: '900px',
				'height'			: '500px',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
				
			});
		});
</script>

morfasto · #17 (**permalink**) 18/08/2011, 13:00

Este codigo:

Código HTML:

<script>
		!window.jQuery && document.write('<script src="jquery-1.6.1.min.js"><\/script>');
	</script>
<script type="text/javascript" src="./scripts/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="/pls/portal/docs/PAGE/WEBBOG/CONTENIDO/NOADMIN/OBJ_HEADER/FANCYBOX/JQUERY.FANCYBOX-1.3.4.PACK.JS"></script>
<script type="text/javascript">
		$(document).ready(function() {
																																
			/*
			*   Examples - various
			*/
			$("#various4").fancybox({
				'padding'			: 0,
				'width'				: '900px',
				'height'			: '500px',
				'autoScale'			: false,
				'transitionIn'		: 'none',
				'transitionOut'		: 'none'
				
			});
		});
</script>

Debes de ponerlo antes de:

Código HTML:

<a id="various4" class="extLink" rel="lyteframe" title="Banquear" rev="width:900; height:500; scrolling:auto;" href="http://intraweb.ath.net.co:9051/pls/portal/docs/PAGE/WEBBOG/CONTENIDO/ADMIN/MINISITES/banquear.swf"><img src="/pls/portal/docs/PAGE/WEBBOG/CONTENIDO/ADMIN/BANNERS/01_BANCAPERSONAS.JPG" alt="" /></a>

Con eso deberia de funcionar.

livaes86 · #18 (**permalink**) 23/09/2011, 10:34

Hola tengo el mismo problema ya pobré la galería que recomiendan y nada no sé si es porque la carga de mis iframe lo hago mediante ajax alguien puede echarme una mano no encuentro solución anexo web lo que quiero es que al abrir las fotos de la galería se posicione en el index madre y me abre dentro del iframe. es en la sección de room gallery y ahí abren cualquier link gracias por la ayuda que puedan darme.

www.e-vanhost.net/villalili