VFX Librería visual para cargar contenido en AJAX sobre una ventana modal
Este fin de semana he estado trabajando en un nuevo proyecto personal, un poco parecido a redz.es, donde me he visto en la necesidad de usar un efecto que he visto en algunos blogs, donde se muestra un contenido por sobre de la página, ocultando esta detrás de un velo oscuro, para que os hagáis a la idea:
Ejemplos
VFX es una librería que permite ocultar la página tras un velo del color deseado, para mostrar encima un contenido, pudiendo ser este publicidad, formularios de contacto|registro|entrada de usuario, ventanas de ayuda, o incluso para dificultar la navegación a nuestros visitantes.
Lo mejor de la librería es que permite cargar cualquier contenido en una capa sobre de la transparencia, pudiendo crear páginas super-dinámicas para mostrar desde galerías de fotos|vídeos|audios hasta información altamente relevante para el usuario.
Os remarco las características más interesantes:
- Color de fondo personalizable
- Transparencia de fondo desde 0% hasta 100%
- Carga de contenido dinámico con AJAX
- Puede cargar cualquier tipo de contenido
- Facilidad de uso
- Compatibilidad con Firefox y Internet Explorer (*)
*: Si alguien puede probarlo en otros navegadores|sistemas operativos y darme un toque, me haréis un favor, en casa no tengo apenas herramientas de prueba.
Pódeis descargar todo lo necesario aquí: librería VFX
Para utilizarlo es muy sencillo, sólo tenéis que añadir estas líneas de código en la cabecera:
Y luego le añadís un evento onClick a un botón para que llame a la función vfx.carga();
-
vfx.carga(true,"archivo.php");
Con eso se os cargará la página sobre un manto de color.
La función carga acepta 3 argumentos:
Display: es un booleano (true|false) que indica si se va a mostrar u ocultar la ventana vfx.
URL: la dirección de la web que vamos a cargar.
callback: este es un argumento opcional, y es la función que se ejecuta una vez cargado el contenido de la ventana vfx.
Ejemplo de uso con callback:
-
carga_ok=function(){alert("OK");}
-
vfx.carga(true,"archivo.php",carga_ok);
-
-
//o bien:
-
-
vfx.carga(true,"archivo.php",function(){alert("OK");});
Si tenéis cualquier duda, podéis dejar un comentario o mandar un correo en la dirección que figura en la cabecera del archivo vfx.js
Espero vuestros comentarios, críticas y sugerencias.
Comentarios
Mis felicitaciones.. ahora a dormir la siesta eh? :-p
Confirmo que en Safari 2.0 funciona de coña! :D
En Firefox 2.0.0.1 para Mac no funciona el ejemplo 3, solo se ve el botón de cierre, pero la animación flash no se reproduce, a ver si lo puedes arreglar que está muy currado el tema.
Ok, me respondo, va a ser que si que funciona, es que me ha confundido que has cambiado el flash del ejemplo 3, el de esta mañana se cargaba muy rápido (los cuadraditos recolocandose), pero el videoque has puesto luego de los Naturals tardaba un poquito en aparecer.
Sorry, y merci por compartir código!!
[...] Relacionado con el tema, Marc está iniciando un proyecto con un dominio muy bueno que tiene, lost.in. Actualmente no aparece ningún servicio en la web, pero ya ha comenzado a hacer alguna librería interesante con javascript, por ejeplo la vfx. Permite ocultar la página tras un velo del color deseado, para mostrar encima un contenido, pudiendo ser este publicidad, formularios de contacto|registro|entrada de usuario, ventanas de ayuda, o incluso para dificultar la navegación a nuestros visitantes. Ejemplo 1 – Ejemplo 2 – Ejemplo 3 Yo ya lo he utilizado para Redz.es. Cuando se hace una búsqueda de una dirección incorrecta o que no encuentra el sistema, aparece un cuadro en medio de la pantalla que informa del correcto uso de la búsqueda. [...]
Para el apartado de sugerencias… deberías mejorar el sistema de bloqueo de lo que queda detrás del “velo”. No puedo hacer click, pero sí tabular y etc.
La posibilidad de arrastrar el ventanuco tampoco estaría mal.
Salud.
Muy buena su libreria…
pero tengo un par de problemillas:
1)Existe alguna forma de que cuando bloqueas la página con el iframe, este se autoajuste a la página si ésta cambia de tamaño? : cuando por algun motivo la página cambia de tamaño, el iframe se “queda arriba”.
2)Tienen alguna forma de que el div con el mensaje que se abre sobre el iframe se vaya desplazando a medida que se scrolea hacia abajo?
Gracias
Hola Jorge,
a lo que comentas del iframe que se queda arriba, supongo que te refieres al momento al que sale el scrollBar y lo desplazas para mostrar el resto de la página. La solución a eso está ligada a tu segunda consulta, ya que tendría que añadir una porción más de código que desplazase el iframe ventana abajo para acompañar la posición del scroll.
Intentaré hacerlo en un rato este fin de semana y cuando lo suba lo indicaré con una actualización.
Me puedes enseñar donde lo estás implementando?? :)
saludos!
gracias por responder… disculpame por la tardanza, pero recien veo la respuesta porque estuve un tiempo ocupado con otras cosas… pero sí, era eso a lo que me refería… supuestamente iba a reemplazar los clásicos Alerts en una parte de un proyecto aún no implementado, pero no se si lo vamos a usar por causa de ese detalle… si logro subir algo almenos como ejemplo te paso la página.
Hola de nuevo Jorge, le eché un ojo al asunto y terminé por ocultar el scroll en el momento en el que se muestra el VFX. La verdad es que es un poco comida de cabeza hacerlo de otra forma, ya que se tendría que desplazar todo el contenido de la página cuando realmente solo se está mostrando una alerta (momento en el que se supone que no hay más interacción con la página que con lo que hay en ese iframe).
Tengo el arreglo en casita, pero estoy sin Internet por culpa de la mudanza, a ver si logro colgarlo y explicar como funciona.
Estoy mal, o creo que lo que se muestra aquí no funciona? por favor si alguien me puede decir si lo hicieron funcionar o no.
Pos a mi tampoco me funciona.. lexes…!
Marc podrias poner el codigo de los ejemplos.. en descarga!
Xd
Gracias de antemano, y la sugerencia de que la ventana del primer ejemplo se pueda mover es muy atractiva
JHON, FRANCISCO, con que navegador trabajais? lo he trasteado con IE6.0 y con FF2.0 y funciona correctamente.
FRANCISCO, en cuanto tenga internet en casa lo cuelgo sin falta y le daré un repaso a lo que comentas. Por ahora chungo, ya que aún estoy offline en casita :(.
Se le puede poner alguna librería de DragAndDrop y listos, ya te digo que miraré a ver que se pué hacer :)
saludos!
Gracias men, te estoy realmente agradecido, estoy trabajando en un proyecto en el que me vendria excepcionalmente de perlas!! ajaja
Hola estoy interesado en el script pero no logro hacerlo funcionar, es decir si parto del archivo Base.php, no hace nada, yo en mi pagina tengo lo mismo pero lo realice con un componente de joomla que no puedo decifrar, pero megustaria poder poner videos de la misma manera pero no puedo hacer que me funcione, la explicacion de la linea que debo agregar no la entiendo por que en un lugar dice “archivo.php” pero no dice que iria ahi.
Saludos
Te hago una pregunta, en Mozilla no se ve el cursor al crear una pagina que contenga input text para cargar datos… No sabes si existe alguna forma de solucionarlo?
Muchas Gracias.
Saludos.
Muy buena libreria…
Bueno el problema general que yo tengo es el siguiente y sucede con cualquier ventana o libreria modal que se haga tengo un flash en un html con animacion y unos links que abren ventanas modales que son htmls como registros, contacto etc
por el efecto de la animacion del flash estas ventanas que contienen los htmls se abren pero de una manera muy lenta que permite que el usuario se aburra y se salga del sitio commo hago para que pueda poner flash y al mismo tiempo ventanas modales
Deja un comentario