LIGHTBOX gone-wild

En mas de una ocasión necesitamos mostrar información  en nuestro sitio Web pero no deseamos que el visitante escape a un sitio de referencia existen herramientas para mostrar informacion que en estos ultimos meses (2008) se han multiplicado y son variados  los sitios que trabajan con lo practico de  Iframe  y lo elegante de Ajax lightbox, cada uno  con sus beneficios.

Ahora veremos que ocurre al mezclar estas dos herramientas que nos permitiran entregar información adicional a nuestro sitio web, sin que el visitante abandone el mismo.

Variados son los script existentes de LightBox   yo he probado  muchos y el ejemplo que tomo me resulto muy bien. Se los dejo como una buena opcion, aunque no uso AJAX causa un efecto similar y al usar iframe puedo colocar variados elementos en su interior.

 LIGHTBOX gone-wild :  archivos lightbox iframe gone wild    

Ejemplo:  

El gran problema que resulta con este script es el tamaño del recuadro que no es automatico sino fijo.

Con un iframe de medidas: width="500" height="350" px  tamaño prefijado en el archivo lightbox-iframe.js

y un Cuadro exterior prefijado en lightbox.css de width:550px; height:500px;

con el codigo

#lightbox{
display:none;
position: absolute;
top:50%;
left:50%;
z-index:9999;
width:550px;
height:500px;
margin:-220px 0 0 -250px;
border:10px solid #555555;
background:#FDFCE9;
text-align:left;
}

LIGHTBOX++  lightbox con soporte para flash.

http://www.codefidelity.com/

La evolucion logica de Lightbox, soporte para Flash, es solo cuestion de tiempo la riqueza que nos entrega Flash permite que este en todos lados, ahora le toco el turno a Lighbox con una mejora sustancial totalmente funcional para tus imagenes como tambien en peliculas Flash.
En la implementacion es tan simple como un Lightbox Standard, lo veremos a continuacion.

Codefidelity      Archivos:  lightbox++v101.zip  Ejemplo:

Una Imagen             Multiples Imagenes                         Pelicula Flash

Luego de descargar los archivos anteriores debemos escribir en las cabeceras de nuestras paginas, <header> </header>
 

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox++.js" type="text/javascript"></script>
<link href="css/lightbox.css" rel="stylesheet" type="text/css" media="screen" />
 

Ahora debemos hacer las llamadas para mostrar una imagen en nuestro lightbox