Efectos usando AJAX, Ajax for lightboxes

| www.blogonautia.tk ©2007-2008

extraido de: fuente<----

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:

<script src="js/prototype.js" type="text/javascript"></script>


<script src="js/tooltip.js" type="text/javascript"></script>

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

<style>

.popup{

padding:10px;

border:1px solid #ccc;


background:#eee;

width:250px;

font-size: small;

}


#book1{

width:103px;

height:50px;

margin:0 auto;


font-family:"Times New Roman", Times, serif;

font-size:36px;

color:#CCCCCC;


text-decoration:overline;

background:#ff6803;

}


</style>

Hacemos el esqueleto necesario en html entre body /body:

<div id="book1">Tooltip</div>


<div id="popup1" class="popup"></div>

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

<script type="text/javascript">

new Ajax.Updater( 'popup1', 'text.php' );

new Tooltip('book1', 'popup1')

</script>

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:

<script src="js/prototype.js" type="text/javascript"></script>


<script src="js/lightbox.js" type="text/javascript"></script>

A continuación llamamos a la hoja de estilos:

<link rel="stylesheet" type="text/css" href="css/lightbox.css">

Y entre body y /body colocamos la siguiente estructura:

<div id="centra"><a href="text.php?phpMyAdmin=JTM06PkZm21RcPh-da2-FZy70a7" class="lbOn">Don Quijote de la Mancha (click m&aacute;s info)</a>

*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