February 22nd, 2007 by admin
Basta con añadir un archivo de javascript [reflect.js] a tu código, hacer referencia al ID de la imagen, y automáticamente se crea el reflejo en fotografÃas que has indicado, un reflejo ya tÃpico en las “webs 2.0″, como por ejemplo.
Si quieres ver el ejemplo online pincha [aqui]
Enlaces: http://arapehlivanian.com | Ficheros: Descargar
Categoria: Internet, Diseño, Utilidades, Fotos | No Comments »
February 7th, 2007 by admin
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
Si has visto el ejemplo, podrás seguir los pasos de instalación alli también.
CODE:
Image Thumbnail Viewer
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 | 1 Comment »