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.
Super efectivo el script, pero tengo dramas con los bordes azules de la imagen, es parte de una tabla en una web y se me descuadra, he quitado la opcion de subrayar los vinculos y nada, alguna opcion?
hola escribo para ver si pueden ayudarme con un problema instale Image Thumbnail Viewer pero lo q pasa que hay interferencia con los dropdown lisbox , puedes ver la imagen de esto en http://www.hperu.com/images/problema.JPG ayudame o dame una pista orfavor
Hola Henry, averigue lo del error y ocurre solo en internet explorer y solo con los controles select. Parece que hay conflictos con este tipo de controles. Una solución es probando con otra utilidad para esta funcion, prueba esta: Lightbox, https://www.www.ribosomatic.com/articulos/lightbox-y-sus-nuevas-caracteristicas/
Saludos
Ya instale el Image Thumbnail Viewer y agrege los tres archivos a la plantilla. pero las imagenes las visualiza en una nueva pagina. ¿Como le hago para que me las imagenes se visualicen en la pagina donde esten en minuatura?
hello world