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