Image Thumbnail Viewer: Mostrando nuestras imágenes
Dynamic Drive es una web que permite de manera gratuita obtener scripts en JavaScript o DHTML para nuestros proyectos webs. Y en esta oportunidad hablaremos de su nuevo Image Thumbnail Viewer, que es una utilidad que nos permite tener una vista general de alguna muestra de imagen sin necesidad de abrirla en una nueva ventana del navegador.
La manera de usarlo es sencilla. Supongamos que tenemos una página con información turística, dentro del contenido hay enlaces de texto o pequeñas imagenes de paisajes o lugares (thumbnail). Es en esos enlaces es donde podemos hacer uso de Image Thumbnail Viewer, así le damos la opción al usuario de ver las imágenes en su tamaño normal sin necesidad de abrir la imagen en otra página.
Paso 1. Descargamos los archivos: thumbnailviewer.js y thumbnailviewer.css. Y también loading.gif que simula la carga de la imagen.
Paso 2. Hacemos referencia a los archivos entre las etiquetas <head></head> de la página HTML.
<link rel="stylesheet" href="thumbnailviewer.css" type="text/css" /> <script src="thumbnailviewer.js" type="text/javascript"></script>
Paso 3. Ya en nuestro contenido, podemos hacer referencia a los enlaces que abren imagenes, agregando el valor thumbnail a la etiqueta rel.
<a href="/ejemplos/thumbnail/trujillo.jpg" rel="thumbnail">Trujillo</a>
Si nuestro enlace es una image pequeña (thumbnail), sigue el mismo proceso.
<a href="/ejemplos/thumbnail/trujillo.jpg" rel="thumbnail" title="Capital de la Primavera"> <img src="/ejemplos/thumbnail/thumbnail_trujillo.jpg" alt="Trujillo" /> </a>
Si especificamos una descripción en el atributo "title" de la etiqueta "a", ésta se mostrarán en la vista de la imagen en la parte inferior.
Esté pequeño script realmente puede servir a muchos desarrolladores por ejemplo para crear una galería de imágenes algo mas interactiva.
Comentarios
Saludos
Dejar un comentario