Mar 17
GreyBox
Desde hace tiempo querÃa poner este articulo dado que yo ocupo mucho esta script realmente se logran muy buenos resultados estéticos y es muy fácil de implementar. En este blog esta implementado GreyBox.
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.
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 especificaremos 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
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 – DescargaSi necesitan ayuda para implementar greybox solo pidan ayuda y con gusto puedo hacer una explicación mas detallada de como implementarlo.
Fuente www.xyberneticos.com
Comments: 14
hola que tal quisiera hacer una consulta con respecto a la aplicacion GreyBox, primeramente decir que es muy bueno pero quisiera hacer algo diferente ya que en mi pagina utilizo iframe y me gustaria que cuando le doy clic sobre la imagen pequeña esta no salga en mi iframe sino en mi pagina principal, osea que esta no se carge en la misma pagina ys que no se aprecia por lo que el iframe no es tan grande para que se entienda lo que quisiera le dejo la pag estoy tratando de modificarlo http://www.proyectonavegar.com/noticias_internas/culmino_prueba_diagnostico_2008/galeria_culmino_prueba/galeria_prueba_2008.html
gracias
Con gusto te puedo ayudar pero, si puedes ser mas especifica seria perfecto. Asà te podre dar una mejor ayuda
Hola. Qué tal.
Mira yo estoy intentando hacer que esto funcione, pero que vamos. No me sale.
Lo estoy probando en local.
Lo quiero usar para abrir un formulario. Digamos el archivo form.html.
Entonces, he creado en mi sitio, una carpeta formulario, donde está guardado el archivo form.html, y dentro de esta carpeta está la carpeta greybox.Donde están los archivos css,js.
Entonces no se si el error lo cometo en la lÃnea que comentas
var GB_ROOT_DIR = “formulario/greybox/”;
A continuación pongo este codigo
script type=”text/javascript” src=”greybox/AJS.js”>
todo eso entre las etiquetas head
y por último en el body, pongo esto
para que me abriera la ventanita que has puesto tu de ejemplo del google, pero nada. No me va
Si me puedes ayudar, te lo agradecerÃa, porque lo quiero usar en más partes de la web.
Gracias y un saludo.
no ha salido bien el codigo, te lo vuelvo a poner. Y perdona las molestias.
var GB_ROOT_DIR = “formulario/greybox/”;
y en el body:
google
nada que te estoy poniendo el código, pero no se ve.
Bueno da igual.
Ya veré que hago. Un saludo
Otra vez yo.
Oye, que nada. Cinco minutos más dandole al tema, y ya lo he conseguido.
Gracias, gracias, gracias.
Pues me alegro, cualquier duda contactame en el msn ryu@tutula.net o igual deja coment.
gracias por el interes en la pagina.
Hola, es que estaba visitando tu pagina y vi que hablabas de los dominios co.cc, te cuento que yo he tratado y tratado pero no he podido hacerlo, te cuento, tengo un hosting 50webs.com, y este me dio los dns, pero no servian , entonces con cdmon.com, obtuve los dns y aqui lo configure para que se fuera para mi pagina, y el co.cc puse estos dns, pero cuando entro a la pagina no carga el contenido….mira es http://www.clasesmateyespa.co.cc, es un sitio web educativo pero me aparece algo muy raro. Me podrias ayudar?, te lo agradeceria infinitamente, me meto a foros y hago la pregunta y nadie responde..llevo dos semanas en esto. Muchas gracias.
Un favor, estoy utilizando greybox(galeria de imagenes), dentro de mi pagina principal utilizo un iframe para listar las miniaturas de las fotos, al hacer click sobre la miniatura abre la galeria del greybox pero (OJO) dentro del mismo iframe, la idea no es esa, si no q muestre en todo el navegador.
gracias y muxos saludos …
entiendo lo que quieres hacer, pero recuerda que el script lo incluyes en la pagina en la cual deseas que exista el efecto y un iframe es la inserción de una pagina independiente dentro de otra pagina en un espacio limitado, asi que aunque pusieras el script también en la pagina principal en donde esta el iframe no se podrÃa realizar tu idea ahora bien si trabajaras con frames talves seria posible si incluyes los script de graybox en la pagina que contiene los frames en lugar de incluirlos en la pagina que se carga en el frame.
Espero que esto te ayude en algo, si tienes mas inquietudes con mucho gusto te ayudo.
Saludos y gracias por visitar la pagina….
Hol@,
me gustarÃa saber si existe la posibilidad de utilizar estos lightbox como mensajes de alerta o confirmación al momento de procesar un formulario; es decir, me gustarÃa mostrar este tipo de ventanas para mostrar los mensajes cuando realizo la validación de los campos. He visto que siempre se abren los lightBoxes a través de un enlace pero me gustarÃa sustituir los alerts de JavaScript por este tipo de ventanas, asà que necesito abrirlos de esta forma.
Si no es posible, hay alguna forma de personalizar los mensajes de alerta?
Gracias =)
hola,
me ha funconado perfecto, sin embargo tengo un pequeño problema: como puedo enviar datos a la ventana madre desde una ventana con greybox? con un popup normal utilizo opener pero aca no funciona
gracias.
Hola señores estoy también interesado en incluir esta librerÃa a una aplicación que estoy haciendo, pero mi problema es el siguiente: tengo la ventana padre: tengo unos select que los cargo desde la base de datos, tengo una opción de agregar mas… en ese instante me abre la ventana flotante donde me abre el formulario donde almacenado la informacion pero asu vez cuando cierre se me recargue la pagina padre sin que se me pierda el resto de datos que ya habia seleccionado o escrito en la ventana padre.
hola saes no carga la imagen en un popup, solo la hace grande pero no coloca el fondo negro como lo devia de hacer q estoy haciendo mal