GreyBox, ventanas flotantes para nuestra 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 .
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:

PLAIN TEXT

JavaScript:

<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:

PLAIN TEXT

JavaScript:

<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.

PLAIN TEXT

HTML:

<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.

PLAIN TEXT

HTML:

<a href="imagenes/foto_grande.jpg" rel="gb_imageset[nice_pics]" title="Night valley">
<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

PLAIN TEXT

HTML:

<a class=”GB” href=”DIRECCION URL” title=”TITULO” …>TEXTO… </a>

Compartelo

University Update - AJAX - GreyBox, ventanas flotantes para nuestra web said,

Wrote on July 30, 2007 @ 4:03

[...] Contact the Webmaster Link to Article ajax GreyBox, ventanas flotantes para nuestra web » Posted at Xyberneticos on [...]
Fernando S. said,

Wrote on July 30, 2007 @ 17:22

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 said,

Wrote on July 30, 2007 @ 19:01

Hola, me gustaria si puedo usar este script en el bloguer y si me puedes enseñar a usarlo.
Chicoblog said,

Wrote on July 31, 2007 @ 18:48

Esta utulidad Javascrip, ya la conocia, es bastante buena, lo recomiendo a 100%

Saludos!
Ventanas Flotantes en Javascript con GreyBox said,

Wrote on August 10, 2007 @ 3:26

[...] Via: Xyberneticos [...]
Clety said,

Wrote on February 14, 2008 @ 22:49

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 said,

Wrote on March 30, 2008 @ 21:07

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.