Image Thumbnail Viewer
Hace tiempo salÃó el script Lightbox, el cual al pinchar en una foto para verla ampliada, éste hacÃa un tipo de “precarga de la imagen”, visualizandola posteriormente en el centro de la pantalla [ver ejemplo], la cosa negativa de este script, es que tardaba un poco la carga, por el peso que tenÃa.
Ahora Dynamic Drive DHTML Scripts ha creado un script también utilizando la tecnologÃa de AJAX, que realiza el mismo proceso para visualización de la imagen, pero mejorando el tiempo de carga considerablemente [ver ejemplo].
Para poder utilizar este último script en tus galerÃas de fotos, debes de descargarte estos archivos
- thumbnailviewer.css
- thumbnailviewer.js
- loading.gif (Imagen que se visualizará para indicarnos la carga de la galerÃa)
Si has visto el ejemplo, podrás seguir los pasos de instalación alli también.
Una vez bajado todos los archivos de Image Thumbnail Viewer (los podéis bajar desde <a target=“_blank” href=“http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm”><strong>aqui</strong></a>), los pondremos en el mismo directorio donde esté la pagina web y haremos lo siguiente:
- Antes de cerrar la etiqueta del <head> añadiremos esta lÃnea para cargar el estilo de la capa y el script
<strong><link xhref=“thumbnailviewer.css” mce_href=“thumbnailviewer.css” rel=“stylesheet” type=“text/css” /></strong>
<strong><script xsrc=“thumbnailviewer.js” mce_src=“thumbnailviewer.js” type=“text/javascript”>
/***********************************************
* Image Thumbnail Viewer Script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script></strong><strong />
- Para ponerlo en tus imágenes, solamente tendremos que poner lo siguiente:
<strong><a title=“Este es un ejemplo con imagen” rel=“thumbnail” href=“http://muykuky.com/imagen1.jpg”><img src=“http://muykuky.com/imagen1p.jpg” /></a></strong>
<strong><a title=“Este es otro ejemplo con enlace” rel=“thumbnail” href=“http://muykuky.com/imagen2.jpg”>PINCHA</a>
</strong>
Ya tienes tu Image Thumbnail Viewer funcionando en tu site y carga más rapido que Lightbox V 2.0!
Categoria: AJAX, Diseño, Utilidades, Fotos, Tutoriales |
April 8th, 2008 at 11:15 pm
Hola!!!
espectacular ejemplo,peero…
no se puede descargar los archivos.
espero que no sea el unico con este problema.
lo intenté con Mozilla y IE7
gracias.!!!