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 .
Demos - Descarga
¿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:
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_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.
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.
<img src="imagenes/foto_pequeña.jpg" />
</a>
<a href="imagenes/foto_grande2.jpg " rel="gb_imageset[nice_pics]" title="Salt flats in Chile">
<img src="imagenes/foto_pequeña2.gif" />
</a>
Ejemplo Visual
Demos - Descarga
Otra alternativa mediante plugin
Si utilizas wordpress y deseas lograr esto de otra manera, otra alternativa entonces será el plugin GreyBox de Anieto, 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
Loading ...
University Update - AJAX - GreyBox, ventanas flotantes para nuestra web
29-07-2007
Permalink
[...] Contact the Webmaster Link to Article ajax GreyBox, ventanas flotantes para nuestra web » Posted at Xyberneticos on [...]
Fernando S.
29-07-2007
Permalink
Que interesante, voy a ver en que forma puedo aplicar esto mi pagina ya que you uso DW CS3 y la mayoria de mis paginas estan creadas en una serie templates
Arthas
29-07-2007
Permalink
Hola, me gustaria si puedo usar este script en el bloguer y si me puedes enseñar a usarlo.
Chicoblog
29-07-2007
Permalink
Esta utulidad Javascrip, ya la conocia, es bastante buena, lo recomiendo a 100%
Saludos!
Ventanas Flotantes en Javascript con GreyBox
29-07-2007
Permalink
[...] Via: Xyberneticos [...]
Clety
29-07-2007
Permalink
Hola, se pueden anidar estos efectos?
Es decir, dentro de una ventana poner otro vinculo para hacer lo mismo dentro de esa misma ventana?
Mil gracias !!!
henry
29-07-2007
Permalink
buen script men, no se si me pudieras ayudar a colocarlo en mi web que es en XHTMl. bueno si no te molestaria te lo agradeceria mucho.
Leo
29-07-2007
Permalink
una pregunta sabes si desda la nueva pagina q se abre se pueden enviar datos a la primera ventana?
Israel
29-07-2007
Permalink
No funciona le link de descarga.
Me podrian decir donde descargar un ejemplo de eso.
Slaudos !!