Ventanas flotantes para web
GreyBox, es una pequeña utilidad Javascript que mediante ajax nos permite cargar en una ventana emergente diferentes enlaces, entre ellos una web, imágenes, y otras cosas. El efecto logrado es muy similar al que obtenemos utilizando lightbox.
¿Para que podría usarlo?
- Exhibir páginas externas
- Exhibir páginas internas (preferencia de usuario, características, formularios de contacto, etc)
- Exhibir un vídeo o una animación
- Exhibir imágenes
- Exhibir información de un producto
- etc
¿Con que navegadores funciona?
- Safari
- Firefox 1.5+
- Internet Explorer 5.5+
- Ópera 8.5+
Instalación
- Descargamos la librería greybox
Paso 1
Añadir a la sección de tu header; “GB_ROOT_DIR” donde espeficicaremos la URL donde se localizaran los archivos estáticos de GreyBox:
-
<script type=“text/javascript”>
-
var GB_ROOT_DIR = “http://midominio.com/greybox/”;
-
</script>
Paso 2
Añadir también después los scripts y un stylesheet:
-
<script type=“text/javascript” src=“greybox/AJS.js”></script>
-
<script type=“text/javascript” src=“greybox/AJS_fx.js”></script>
-
<script type=“text/javascript” src=“greybox/gb_scripts.js”></script>
-
<link href=“greybox/gb_styles.css” rel=“stylesheet” type=“text/css” />
Ejemplos de uso
Exhibir una Web
Para accionar GreyBox solamente necesitarás añadir una etiqueta “rel” al enlace.
Ej.
-
<a href=“http://google.com/” title=“Google” rel=“gb_page_fs[]“>
-
Abrir Google en ventana</a>
Ejemplo Visual
Exhibir galería de imágenes
Para accionar GreyBox añadimos una etiqueta “rel”. También utilizaremos para la galería dos imágenes por cada una. La imagen en miniatura en la exhibición de la galería y la otra en tamaño natural que se mostrara al hacer click sobre ellas.
Ej.
Ejemplo Visual
Otra alternativa mediante plugin
Si utilizas wordpress y deseas lograr esto de otra manera, otra alternativa entonces será el plugin GreyBox cumpliendo con las mismas funcionalidades.
Instalación
1. Descarga Plugin GreyBox
2. Descomprimir el fichero
3. Subir al FTP a la carpeta /wp-content/plugins/ todo el contenido (carpeta greybox y gb_plugin.php)
4. Activar desde el menu administrador
5. Ir a Opciones >> GreyBox para configurar las opciones del plugin. (entre otras cosas aquí podremos configurar el tamaño de la ventana que abriremos)
Modo de uso
-
<a class=”GB” href=”DIRECCION URL” title=”TITULO” …>TEXTO… </a>
ene 5, 2009 at 21:19
yoselin says,
sep 15, 2009 at 17:30
jean says,
disculpa men una pregunta podrias explicar mas detalladamente como se instala y que pasa si tengo joomla 1.5 por favor
feb 5, 2010 at 13:36
GiselaSSLL says,
Hola, existe la posibilidad de cerrar la ventana q se abrio por ejemplo con GB_show a travez de un boton? y tambien recargar la pagina padre al momento de cerrar la emergente?, gracias!
may 26, 2010 at 9:27
luis says,
hola no entiendo muy bien lo de la instalación
eso q tienes var GB_ROOT_DIR = “http://midominio.com/greybox/”
es la carpeta donde esta la libreria supongo
yo la tengo en el escritorio y cambio la direccion http por la del escritorio
esto es asi?? o como es
oct 23, 2011 at 20:52
Ribert says,
El link esta mal… no pudeo descargar… grgr
oct 23, 2011 at 20:53
Ribert says,
el link esta mal, no puedo descargar…
jul 10, 2012 at 22:56
TeRRoRDC says,
Man te agradesco sinceramente por el contenido de tu post, me alegra que haya contenido productivo en la web, asi pues tratare de hacer lo mismo en mis sitios.
Gracias de nuevo y un saludo desde San Diego CA.