Javascript para ampliar una fotografía, (Thumb)

Este es un método muy utilizado en internet, seguramente lo habréis visualizado en infinidad de páginas y lo mejor, es que es muy sencillo de colocar.

Lo único que tenemos que tener en cuenta es una serie de pasos a procedemos a detallar.

En primer lugar tendremos que poner dentro de las etiquetas del "head" el siguiente código javascript:

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

Como podés comprobar, el código hace llamada a varios elementos;

css/lightbox.css js/prototype.js js/lightbox.js

Pues bien, estos los podréis descargar a través de del siguiente enlace, así como otra carpeta llamada "images", que componen los pequeños grafiquitos que luego se mostrarán el la acción del javascript, (como "siguiente", "atrás", "cerrar", etc...).

Una vez que hemos implementado el código que comentabamos anteriormente dentro del head y subido las carpetas correspondientes a nuestro servidor, toca la última parte, añadir las fotografías.

Para ello tendréis que crear dos fotografías, una la pequeña o thumb y otra para cuando pinchemos aparezca ampliada.

Una vez creadas las fotografías, lo último a realizar, es insertarlas con el siguiente código:

<a href="foto_1_ampliada.jpg" rel="lightbox[roadtrip]"> <img border="0" src="foto_1_thumb.jpg"></a>

Pincha aquí para ver un ejemplo.