MuyKuky.com

La actualidad en forma de Blog

Reflejo automático en imagenes, por Ara Pehlivanian

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.

Ara Pehlivanian

Si quieres ver el ejemplo online pincha [aqui]

Enlaces: http://arapehlivanian.com | Ficheros: Descargar

Categoria: Internet, Diseño, Utilidades, Fotos | No Comments »

Image Thumbnail Viewer

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 &lt;head&gt; añadiremos esta línea para cargar el estilo de la capa y el script
<strong>&lt;link xhref=“thumbnailviewer.css” mce_href=“thumbnailviewer.css”    rel=“stylesheet” type=“text/css” /></strong>
<strong>&lt;script xsrc=“thumbnailviewer.js” mce_src=“thumbnailviewer.js”    type=“text/javascript”&gt;
/***********************************************
* 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
***********************************************/

&lt;/script&gt;</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 »