abrir lightbox fuera del iframe contenedor de imagen

herzbazi · #1 (**permalink**) 02/03/2012, 15:04

tengo una duda

yo tengo una web que estoy trabajando con un iframe en el index y en dicho iframe se abren todas las paginas , ahi tengo una seccion de galerias (que tambien se abre en el iframe) dicha galeria tiene un efecto lightbox .

el problema que me da es que igual siempre me abre dentro del iframe el efecto y lo que yo quiero que abra sobre el index pues el iframe no alcanza para la foto

estoy utilizando jquery light box2

<a href="Centro de Mesas Notas Musicales Marzo 2011 1.jpg" rel="lightbox" caption"><img src="Centro de Mesas Notas Musicales Marzo 2011 1.jpg" width="90" height="108" border="0" /></a>

Naahuel · #2 (**permalink**) 02/03/2012, 16:10

Código Javascript:

Ver original$(function() {
    //selector para los links con lightbox
    var selector = 'a';
    
    //ligtbox normalmente.
    $(selector).lightBox();
    
    //lightbox para los iframes
    $('iframe').load(function(){
      $(this).contents().find(selector).lightBox();
    });
});

Acá el ejemplo funcionando: http://jsbin.com/alayiz
Como verás, el lighbox abre en la ventana padre y no en el iframe.

No me parece bueno usar iframes de esa forma. Pero es sólo mi opinión :)

-edit-

Me olvidé de mencionar que ese script debe estar en la ventana padre, junto con todos los archivos necesarios para que funcione lightbox. El documento del iframe no precisa tener ningún script ni nada.

herzbazi · #3 (**permalink**) 02/03/2012, 16:35

Cita:

Iniciado por Naahuel

Código Javascript:

Ver original$(function() {
    //selector para los links con lightbox
    var selector = 'a';
    
    //ligtbox normalmente.
    $(selector).lightBox();
    
    //lightbox para los iframes
    $('iframe').load(function(){
      $(this).contents().find(selector).lightBox();
    });
});

Acá el ejemplo funcionando: [url]http://jsbin.com/alayiz[/url]
Como verás, el lighbox abre en la ventana padre y no en el iframe.

No me parece bueno usar iframes de esa forma. Pero es sólo mi opinión :)

-edit-

Me olvidé de mencionar que ese script debe estar en la ventana padre, junto con todos los archivos necesarios para que funcione lightbox. El documento del iframe no precisa tener ningún script ni nada.

este codigo lo coloco dentro de html que contiene las imagenes ?
como un scritp verdad...

puedo hacerte una pregunta...

si no se usa un iframe que puedo usar .. te soy sincero soy autodidacta y muy nuevo en esto asi que me cuesta y todo lo que me dicen lo tomo

gracias

Naahuel · #4 (**permalink**) 02/03/2012, 16:47

Ese código lo colocás en el documento padre, como te indiqué más arriba. O sea, supongamos que tenemos este caso:

documento padre:

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <title>Mi documento</title>
    <!--aca incluyo jquery, los archivos de lightbox y los scripts para que lightbox funcione-->
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="lightbox.js"></script>
    <script type="text/javascript">
        $(function() {
        * * //selector para los links con lightbox
        * * var selector = 'a';
        * * 
        * * //ligtbox normalmente.
        * * $(selector).lightBox();
        * * 
        * * //lightbox para los iframes
        * * $('iframe').load(function(){
        * * * $(this).contents().find(selector).lightBox();
        * * });
        });
    </script>
</head>
<body>
    <p>Lorem ipsum dolor sit amet, nutricem sum in modo. Odore imo dictum aemulum toro frumento manu fueris sidera unam lacrimae eam eos. Quae vero non potentiae Apollonium illis atque ut libertatem accipies. Lacrimas effunditis magister pretium dixerunt enim formam se est cum suam ad te ad nomine. Tharsis ratio puella ut libertatem non ait in fuerat se est amet consensit cellula rei civibus.</p>
    <iframe src="documentohijo.html"></iframe>
</body>
</html>

El documento padre es el "index" en tu caso. El documento hijo es el que tiene los links que querés abrir:

Código HTML:

Ver original<!doctype html>
<html>
<head>
    <title>Mi documento Hijo</title>
    <!--aca no hace falta que incluya los scripts-->
</head>
<body>
    <p>Lorem ipsum dolor sit amet, nutricem sum in modo. Odore imo dictum aemulum toro frumento manu fueris sidera unam lacrimae eam eos. Quae vero non potentiae Apollonium illis atque ut libertatem accipies. Lacrimas effunditis magister pretium dixerunt enim formam se est cum suam ad te ad nomine. Tharsis ratio puella ut libertatem non ait in fuerat se est amet consensit cellula rei civibus.</p>
    <a href="Centro de Mesas Notas Musicales Marzo 2011 1.jpg" rel="lightbox" caption"><img src="Centro de Mesas Notas Musicales Marzo 2011 1.jpg" width="90" height="108" border="0" /></a>
</body>
</html>

Espero esté más claro. De todas formas te queda experimentar y probar, a lo mejor me equivoco pues tu caso varía de alguna forma :)

Pues, la época de usar sitios completamente con iframes y flash ya fue. Estamos en la era de la web 2.0, la web "semántica", la web optimizada para buscadores y dispositivos móviles.

Yo la haría directamente sin iframes, que la navegación te lleve a otra página, no que la cargue dentro de un iframe.
Si lo que buscás es el efecto de que no te recarga la página, podés intentar aproximarte usando AJAX, pero eso es meterse en terrenos más avanzados.

Estas son sólo mis opiniones y mi experiencia. Si te gusta esto lo vas a aprender y lo vas a aplicar a su tiempo.

herzbazi · #5 (**permalink**) 02/03/2012, 16:54

Dos carmas amigo , te lo has ganado

te comento el motivo de usar iframe que hay un banner que esta moviendose todo el tiempo y mi cliente quiere que si va a una seccion de la pagina el banner siga su curso y no vuelva a iniciar

Naahuel · #6 (**permalink**) 02/03/2012, 16:59

Entiendo :) Hay todo un mundo de prácticas y opiniones, pero siempre hay una tendencia.

Mucha suerte con tu proyecto.

(salieron unas estrellitas en el código de arriba, siempre pasa al copiar código del foro :P. Ignoralas.)

herzbazi · #7 (**permalink**) 06/03/2012, 10:47

tengo un pequeño problema no se por que

ya copie el codigo y todo
pero ahora cuando le doy click para ver la foto con el efecto.. inicia la apertura del light box pero
se queda como que trabado.

si quieres adjunto imagen

Naahuel · #8 (**permalink**) 06/03/2012, 10:50

Mejor sería si adjuntas código.

De todas formas, tengo un presentimiento de lo que pasa. No está encontrando la imágen. El problema puede ser que lightbox intenta abrir la imagen con una ruta relativa al documento padre... Intentá usando rutas absolutas dentro del documento del iframe.

Algo como :"/images/blabla.jpg" en lugar de "images/blabla.jpg", si es que están en el índice.

Si no hacé la prueba con Chrome, abrí la consola (F12 -> consola) y fijate si tira algún error al momento que se congela Lightbox.

herzbazi · #9 (**permalink**) 06/03/2012, 12:04

el código es el siguiente

<link href="estilo.css" rel="stylesheet" type="text/css">

<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://leandrovieira.com/projects/jquery/lightbox/js/jquery.lightbox-0.5.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://leandrovieira.com/projects/jquery/lightbox/css/jquery.lightbox-0.5.css" media="screen" />

<script type="text/javascript">
$(function() {
var selector = 'a';
$(selector).lightBox();
$('iframe').load(function(){
$(this).contents().find(selector).lightBox();
});
});
</script>

</head>
<body bgcolor="#FFFFFF" text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="1088" height="801" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td colspan="16">
<img src="images/index_01.png" width="1087" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td colspan="6" rowspan="3" height="117"> </td>
<td rowspan="3" id="logo"> </td>
<td colspan="9" height="66"> </td>
<td>
<img src="images/spacer.gif" width="1" height="66" alt=""></td>
</tr>
<tr>
<td rowspan="2"> </td>
<td id="inicio"><a href="inicio.html" target="contenedor">Inicio</a></td>
<td id="quienessomos">Quiénes Somos</td>
<td id="catalogos"><a href="catalogos.html" target="contenedor">Catálogos</a></td>
<td id="contacto"><a href="formulario.html" target="contenedor">Contáctanos</a></td>
<td colspan="4" rowspan="2"> </td>
<td>
<img src="images/spacer.gif" width="1" height="37" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/index_11.png" width="404" height="14" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
<td rowspan="4"> </td>
<td colspan="14">
<img src="images/index_13.png" width="947" height="7" alt=""></td>
<td rowspan="10"> 
</td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td colspan="3" rowspan="2">
<img src="images/index_15.png" width="11" height="227" alt=""></td>
<td colspan="10" height="220">
<img src="images/index_16.png" width="925" height="220" alt=""></td>
<td rowspan="2">
<img src="images/index_17.png" width="11" height="227" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="220" alt=""></td>
</tr>
<tr>
<td colspan="10">
<img src="images/index_18.png" width="925" height="7" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="5">
<img src="images/index_19.png" width="27" height="348" alt=""></td>
<td colspan="8" rowspan="5"><iframe name="contenedor" src="inicio.html" scrolling="auto" frameborder="0" align="middle" marginwidth="3" marginheight="3" height="346" width="881"></iframe></td>

<td colspan="2" rowspan="5">
<img src="images/index_21.png" width="37" height="348" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
<td id="fb">Siguenos en Facebook</td>
<td>
<img src="images/spacer.gif" width="1" height="38" alt=""></td>
</tr>
<tr>
<td>
<div align="center"><a href="http://www.facebook.com/celebrations.guatemala" target="_new"><img src="images/index_23.png" width="58" height="54"></a></div></td>
<td>
<img src="images/spacer.gif" width="1" height="54" alt=""></td>
</tr>
<tr>
<td id="fb1"><p>Entérate de <br>
Las últimas<br>
noticias</p></td>
<td>
<img src="images/spacer.gif" width="1" height="46" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/index_25.png" width="74" height="296" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="196" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_26.png" width="2" height="100" alt=""></td>
<td colspan="12" id="pie"><p>Visítanos<br>
18 calle 10-50 zona 10 Centro Comercial Plaza La Villa 1er Nivel Tels. 2459-3808 / 2367-5050<br>
Diagonal 6 12-42 zona 10 Desing Center Local 119 Tels. 2459-3808</p></td>
<td rowspan="2">
<img src="images/index_28.png" width="11" height="100" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="70" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_29.png" width="1" height="30" alt=""><

dentro del iframe del index se abre el siguiente archivo. (aqui es donde tengo el link de galeria )

<link href="estilo.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="70%" height="390" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="7">
<img src="images/Fiesta-Tematica_01.png" width="1" height="389" alt=""></td>
<td colspan="4">
<img src="images-fiesta/Fiesta-Tematica_02.png" width="462" height="94" alt=""></td>
<td colspan="4"> </td>
<td colspan="3" rowspan="2">
<img src="images-fiesta/Fiesta-Tematica_04.png" width="184" height="169" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="94" alt=""></td>
</tr>
<tr>
<td>
<img src="images-fiesta/Fiesta-Tematica_05.png" width="125" height="75" alt=""></td>
<td colspan="7" width="531" height="75" id="texto17">Haz de tu fiesta un evento mágico, creamos fiestas temáticas con el tema de <br>
tu preferencia, creando una experiencia única entre tus invitados.</td>
<td>
<img src="images/spacer.gif" width="1" height="75" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="5">
<img src="images-fiesta/Fiesta-Tematica_07.png" width="406" height="220" alt=""></td>
<td colspan="9">
<img src="images-fiesta/Fiesta-Tematica_08.png" width="434" height="14" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="14" alt=""></td>
</tr>
<tr>
<td rowspan="4" width="28" height="206"> </td>
<td colspan="3">
<img src="images-fiesta/Fiesta-Tematica_10.png" width="157" height="135" alt=""></td>
<td rowspan="4" width="26" height="206"> </td>
<td colspan="3" rowspan="2">
<img src="images-fiesta/Fiesta-Tematica_12.png" width="176" height="138" alt=""></td>
<td rowspan="4" width="47" height="206"> </td>
<td>
<img src="images/spacer.gif" width="1" height="135" alt=""></td>
</tr>
<tr>
<td rowspan="3" width="28" height="71"> </td>
<td rowspan="2">
<img src="images-fiesta/Fiesta-Tematica_15.png" width="101" height="29" alt=""></td>
<td rowspan="3" width="28" height="71"> </td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt=""></td>
</tr>
<tr>
<td rowspan="2" width="39" height="68"> </td>
<td>
<img src="images-fiesta/Fiesta-Tematica_18.png" width="101" height="26" alt=""></td>
<td rowspan="2" width="36" height="68" > </td>
<td>
<img src="images/spacer.gif" width="1" height="26" alt=""></td>
</tr>
<tr>
<td width="101" height="42"> </td>
<td> </td>
<td>
<img src="images/spacer.gif" width="1" height="42" alt=""></td>
este es el html de la galeria

<style>
#mini1 li
{
list-style:none;
float:left;
padding:10px;
text-align:center;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td>
<ul id="mini1">
<li><a href="Centro de Mesas Notas Musicales Marzo 2011 1.jpg" rel="lightbox" caption"><img src="Centro de Mesas Notas Musicales Marzo 2011 1.jpg" width="125" height="175" border="0" /></a></li>
<li><a href="Decoracion de Hollywood 13.jpg"><img src="Decoracion de Hollywood 13.jpg" width="125" height="175" border="0" /></a></li>
<li><a href="Decoracion Tematica Holywood 3.jpg"><img src="Decoracion Tematica Holywood 3.jpg" width="125" height="175" border="0" /></a></li>
<li><a href="Decoracion Tematica Holywood 4.jpg"><img src="Decoracion Tematica Holywood 4.jpg" width="125" height="175" border="0" /></a></li>
<li><a href="Decoraciones Holywood Marzo 2011 1.jpg"><img src="Decoraciones Holywood Marzo 2011 1.jpg" width="125" height="175" border="0" /></a></li>
</ul> </td>
</tr>
<tr>
<td><ul id="mini1">
<li><a href="Decoracion de XV años de Hollywood.jpg"><img src="Decoracion de XV años de Hollywood.jpg" width="125" height="100" border="0" /></a></li>
<li><a href="Decoracion Tematica Holywood 12.jpg"><img src="Decoracion Tematica Holywood 12.jpg" width="125" height="100" border="0" /></a></li>
<li><a href="Decoraciones Holywood Marzo 2011 2.jpg"><img src="Decoraciones Holywood Marzo 2011 2.jpg" width="125" height="100" border="0" /></a></li>
<li><a href="Decoraciones Holywood Marzo 2011 3.jpg"><img src="Decoraciones Holywood Marzo 2011 3.jpg" width="125" height="100" border="0" /></a></li>
<li><a href="Decoraciones Holywood Marzo 2011 5.jpg"><img src="Decoraciones Holywood Marzo 2011 5.jpg" width="125" height="100" border="0" /></a></li>
</ul> </td>

esta es la imagen del error

el documento hijo tiene la galeria y tiene que abrir otro hijo ,, tengo que poner ahi los css o que debo de hacer gracias por tu gran ayuda ,,

Naahuel · #10 (**permalink**) 06/03/2012, 12:07

Mostrame los errores que te muestra la consola de Chrome, me parece que va a ser más útil

herzbazi · #11 (**permalink**) 06/03/2012, 12:15

creo que estos son

estas es la direccion celebrationsguatemala.com

http://celebrationsguatemala.com/

Naahuel · #12 (**permalink**) 06/03/2012, 12:16

No, los errores al abrir lightbox. Abrí alguna imagen con lightbox y recién ahí fijate los errores.

herzbazi · #13 (**permalink**) 06/03/2012, 12:25

pero el error me lo da despues,,, le doy click a la foto y cambia a una mas grande, si efecto pero cuando quiero regresar a inicio me abre el efecto y queda buscando o algo asi

son los ultimos dos de abajo
los errores adicionales

herzbazi · #14 (**permalink**) 06/03/2012, 12:31

no se si te es mas facil si lo subo al host, para que veas el error en vivo

Naahuel · #15 (**permalink**) 06/03/2012, 12:31

Entonces no entiendo el problema. El único error que veo ahí es que te faltan imágenes (el boton para cerrar y la de loading). Además linkeaste a los archivos del lightbox desde la web del autor. Es mejor si los descargás y los linkeas localmente.

¿No tenés el proyecto subido en algún lado?

herzbazi · #16 (**permalink**) 06/03/2012, 12:36

si la direccion es
celebrationsguatemala.com

ya mismo subo lo que estoy haciendo para que lo veas

herzbazi · #17 (**permalink**) 06/03/2012, 12:47

ok ya esta subido en esta direccion , si vas a la seccion hollywood , eventos de pelicula y das clic te abre la pagina que tiene el link de la galeria , vez no pasa nada pero si en ese momento das click en inicio se ejecuta..

celebrationsguatemala.com

Naahuel · #18 (**permalink**) 06/03/2012, 12:54

Jejeje es que has copiado mi código tal cual! Era de ejemplo :P

Tenés que usar un selector más específico, probá algo así:

Código Javascript:

Ver original$(function() {
    var selector = 'a[rel="lightbox"]';
    $(selector).lightBox();
    $('iframe').load(function(){
        $(this).contents().find(selector).lightBox();
    });
});

herzbazi · #19 (**permalink**) 06/03/2012, 13:00

Cita:

Iniciado por Naahuel

Jejeje es que has copiado mi código tal cual! Era de ejemplo :P

Tenés que usar un selector más específico, probá algo así:

Código Javascript:

Ver original$(function() {
    var selector = 'a[rel="lightbox"]';
    $(selector).lightBox();
    $('iframe').load(function(){
        $(this).contents().find(selector).lightBox();
    });
});

sos un master compañero funciona de maravilla jajajajaj