aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Lightbox es la herramienta para visionado de imagenes más famosa de todas las que hay, ahora Brian reavis ha añadido la posibilidad de abrir ficheros SWF como si de imagenes se tratara. Para ello usa un fichero externo en PHP  (Sephiroth’s PHP::SWF Reader Class) que se encarga de obtener información acerca del SWF para poder mostrarlo como una imagen.

Instalación 

Primero hemos de editar el fichero js/lightbox.js y buscar la línea.

var swfSizeScript = "http://www.mydomain.com/lightbox2.02/php/ajax.swfsize.php";

 Reemplazaremos la ruta por la ruta en la cual tendremos alojado el fichero ajax.swfsize.php dentro de nuestro servidor.

Ahora solo nos queda enlazar los ficheros en nuestro HTML y para ellos requeriremos Prototype y Script.aculo.us.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <!-- FICHERO CSS -->

Modo de uso

Simplemente tendremos que añadir el atributo rel="lightbox" a nuestro enlace como hacíamos en Lightbox normal.

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Para los ficheros SWF haremos exatamente lo mismo, pero añadiendo el fichero SWF como dirección de nuestro enlace.

<a href="images/image-2.swf” rel=”lightbox” title=”This is a Flash file!”>image #2</a>

Si queremos mostrar una lista de enlaces únicamente tendremos que indicarlo en el atributo rel como si de un array se tratase.

<a href="images/image-1.jpg" rel="lightbox[roadtrip]“>image #1</a>
<a href=”images/image-2.jpg” rel=”lightbox[roadtrip]“>image #2</a>
<a href=”images/image-3.jpg” rel=”lightbox[roadtrip]“>image #3</a>

 [Descargar][Demo]

Compártelo