Esta es una opcion muy util para crear selectores, por ejemplo levantamos en un shadowbox un menu para una opcion determinada y pasarla a la ventana padre o tambien llamada la ventana contenedora del shadowbox.
Ya antes habia hecho esta misma utilizad con jscript y popup utilizando la opcion
pero en shadowbox no funciona esa opcion y deberemos cambiar el window.opener.documento por parent.document.
dejo un sencillo ejemplo para que se hagan una idea, luego lo que viene es parte de tu imaginación.
creamos dos paginas
Página principal (página padre) (index.html)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chichote</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/shadowbox.css">
<script type="text/javascript" src="js/shadowbox.js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<input type="text" name="campo1" id="campo1" />
</form>
<a href="10.php" rel="shadowbox;height=300;width=500">abrir</a>
</body>
</html>
Pagina contenida en shadowbox (menu.html)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chichote</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
}
-->
</style>
<script language="JavaScript">
function actualizarPadre(valor)
{
// form1 corresponde al nombre del formulario de la pagina contenedora o principal
// campo1 es el nombre del campo donde se ingresara el valor en la pagina principal
parent.document.form1.campo1.value = valor;
window.parent.Shadowbox.close();
}
</script>
</head>
<body>
<p><a href="javascript:actualizarPadre('hola mundo')">hola mundo</a></p>
<p><a href="javascript:actualizarPadre('chao mundo')">chao mundo</a></p>
</body>
</html>
Es bastante simple, dejo dos ejemplos, cada uno con su descarga, uno basico y un ejemplo con un buscador de youtube que saque como ejemplo de los chicos de unijimpe el cual adapte para que funcione con este ejemplo.
Ejemplo Basico
Ejemplo Avanzado – Buscador de Youtube
Ejemplo Basico – Cambiando Imagen en ventana Contenedora
Artículos Relacionados:
- Levantar Shadowbox al abrir la pagina (shadowbox open url) Este articulo presentare la manera de Levantar el contenedor Shadowbox...
- Tres opciones indispensables para shadowbox-js En esta oportunidad voy a mostrar tres opciones que me...
- Refrescar página al cerrar Shadowbox ¿Como refrescar pagina al cerrar shadowbox?. Un tips muy util...
- Shadowbox, para mi es el definitivo Andres Nieto publico hace ya tiempo en su web "Shadowbox,...
- Galeria de imagenes estilo Facebook con JQuery y PHP En peticion de VbOkonly de Foros del Web he creado...
Related posts brought to you by Yet Another Related Posts Plugin.
3 Comentarios
Hola, excelentes todos tus articulos, quero preguntarte, si hay alguna forma de hacer esto mismo, pero al revés. Es decir, mostrar el resultado de la busqueda en el shadowbox. ¿Como se podria hacer? Desde ya, gracias.
Hola! Excelente tutorial, muy útil para algo que estoy haciendo.
Quería preguntarte algo, puedo hacer esto pero que al hacer click en el enlace shadowbox se actualice una imagen en la ventana padre?
Muchas gracias de antemano
Hola Marco, me parecio interesante tu pregunta y cree un nuevo ejemplo con lo que necesitas. Es el tercer demo, revisalo.
Saludos