Nueva forma de mostrar imágenes

Introducción

Lo primero que quiero indicar es que esta forma es nueva para mi porque hace relativamente poco que la descubrí y aunque este método lleva ya en el mercado inglés más de un año, para uno mismo una cosa descubierta es una cosa nueva.

Hecha ya esta aclaración, vamos al grano que es lo que interesa.

La forma de mostrar la imágenes la podéis descubrir pulsando sobre la imagen de abajo.

¿Sorpresa?

Espero que SI.

Para aquellos que todavía no os hayáis introducido en el mundo del AJAX y JQuery seguro que os ha gustado el efecto aunque seguramente penséis que es obra de un script muy complejo, que tardaréis muchas horas en hacer lo mismo…

Pues NO: este es un efecto muy simple de realizar y en el que no se requieren grandes conocimientos de Javascript, AJAX, ni programación, simplemente tienes que dedicarle unos 5 minutos!

De hecho hay 2 formas de hacer casi lo mismo: el efecto Lightbox y el ThickBox.

El primero ‘lightbox‘ es el que puse en este mismo blog (tiene un efecto mas acabado) y el segundo ‘thickbox‘ me gusta mas porque se basa en la libreria Jquery, que es un pasada. Jquery creo que es la mejor forma de programar en Javascript, para aquellos que conozcan el PHP es como las librerias de PEAR.

Paso 0 : Manos a la obra

Explicaré como poner en tu web el efecto ‘lightbox‘ pero la forma de instalación es muy similar para ambos, por lo que si te gusta es el ‘thickbox’ deberías poder instalarlo sin ningún problema:

1. Descargamos las librerias de Javascript, los archivos que contienen la programación de estos efectos: lightbox2.03.3.zip (pulsa sobre el enlace).
2. Descomprimimos el archivo que hemos descargado en formato ZIP.
3. Copia las siguientes carpetas en tu servidor: css (contiene los estilos), js (Contiene las librerias y código en JavaScript) e imagenes (Contiene las imagenes de Cerrar y Loading entre otras).

Paso 1: Configuración

1. En la web que vayas a utilizar estos efectos debes incluir el javascript en la cabecera, poniendo este codigo antes de la etiqueta html ‘</head>’.<script type="text/javascript" src="js/prototype.js" />
<script type="text/javascript" src="js/scriptaculous.js?load=effects" />
<script type="text/javascript" src="js/lightbox.js" />

2. Indica los estilos CSS del efecto lightbox, poniendo antes del cierre de la etiqueta ‘</head>’ el siguiete código. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
3. Comprueba que el archivo CSS tenga la ruta adecuada para las imágenes prevlabel.gif y nextlabel.gif. También comprueba que los archivos de loading.gif y closelabel.gif estén bien referenciados en al pricitpio del archivo lightbox.js, por defecto esto deberia estar ya configurado por lo que puedes omitir este paso si quieres.

Paso 2: Activalo!

1. Para que el efecto se muestre solamente tienes que añadir el atributo rel="lightbox" a cualquier enlace (imagen, video, ´pagina web) Que quieras que se muestre con este efecto, por ejemplo: <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
   Este es el código que muestra la imagen de arriba
   

Solo te queda disfrutar de los efectos directmente en tu web una vez hayas realizado los pasos anteriores.

13 Comments

Leave a Comment

Username (required) :
Email (required) :
Web Site :
Comment :

Additional comments powered by BackType