Javascript para ampliar una fotografía, (Thumb)

16 de diciembre de 2011
Valoración del artículo:
En este artículo veremos cómo usar un Javascript para ampliar una fotografía, (Thumb), para nuestras páginas Web.
Atención: Contenido exclusivo de DesarrolloMultimedia.es. No reproducir. Copyright.

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.

Comentarios

Los comentarios de los visitantes son para ampliar la
información del artículo. Cualquiera puede participar.

Añadir un comentario al artículo Publicar un comentario del artículo

Se muestra un comentario revisado

 Link de Megaupload
20/2/12 

Comentario de GatitoLindo:

Podeis publicar por otro conducto el resto del código? Han retirado el de megaupload... Gracias!!

Desarrollo Multimedia:

Ya está cambiado, un saludo!!


Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos
interesantes que se hayan enviado recientemente.


Se han encontrado 2 comentarios sin revisar




El autor
Guía
Categorías

Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...