Efectos usando AJAX, Ajax for lightboxes

Hace unos días los de IBM, en su sección dedicada a los desarrolladores, publicaban un post donde explicaban varios efectos diferentes hechos en AJAX de los que se llevan tanto ahora. Están basados en las librerías estrellas de javascript como scriptaculous o prototype juntando 5 técnicas en total. Todos los ejemplos los tenemos recopilados en un .rar, con las librerías que usan, código html y css. Vamos a ver como implementar dos de ellos, uno para mostrar información al pasar el ratón por encima de un enlace y otro para mostrar texto en un cuadro superpuesto al picar sobre determinado lugar.
Antes de nada nos descargamos el pack donde vienen todos los ejemplos con sus códigos correspondientes.

Mostrando información al pasar el ratón (tooltips) – DEMO

Hacemos una nueva carpeta y le ponemos el nombre Popup. Dentro hacemos otra con el nombre js. Metemos dentro de esta última las librerías prototype.js y tooltip.js.

Creamos un archivo html y entre head /head llamamos a las dos librerías:

[html]


[/html]

Seguido insertamos el css para configurar el aspecto del popup y del texto que lo lanza (esta hoja podría ir linkada desde fuera del documento, pero para el ejemplo lo haremos así porque es poco código):

[css]

[/css]

Hacemos el esqueleto necesario en html entre body /body:
[html]

Tooltip

[/html]

Justo debajo de la etiqueta de cierre /body llamamos el popup:
[html]

[/html]

El texto que mostrará la ventana emergente está dentro de text.php, así que creamos un archivo php, metemos el texto que nos apetezca y lo guardamos como text.php dentro de la carpeta Popup. Guardamos el archivo html que hemos estado haciendo como index.html en la carpeta Popup.

Terminado. El ejemplo es muy simple, pero a partir de este se podría complicar todo lo que os de la cabeza.

Mostrar texto en ventana emergente (lightbox tex) – DEMO

Hacemos una nueva carpeta y la llamamos LightboxText. Creamos otras dos, con nombre js y css. Dentro de la primera metemos las librerías lightbox.js y prototype.js y en la segunda lightbox.css.

Creamos un archivo html y entre head /head llamamos a las dos librerías:
[html]


[/html]

A continuación llamamos a la hoja de estilos:
[html] [/html]

Y entre body y /body colocamos la siguiente estructura:
[html]

Don Quijote de la Mancha (click más info)
[/html]
*el div es opcional, en esta caso está puesto para darle estilo al enlace

Igual que en el caso anterior el texto que se mostrará en el nuevo cuadro se encuentra dentro de text.php, para lo cual creamos un archivo .php, metemos el texto que queremos y lo guardamos en la carpeta LightboxText. Guardamos el archivo html que hemos estado haciendo como index.html en la carpeta LightboxText.

Todos los ejemplos, con una vista previa y explicaciones de cada código en: Ajax and XML: Ajax for lightboxes

Últimos artículos

Scroll al inicio