Mootools – Cómo cargar las imágenes de una página web al estilo de Google Image



Fade Images with MooTools LazyLoad Example

La renovada interfaz de Google Images muestra los resultados y a media que vamos bajando la página, nuevas imágenes son cargadas.

Pero ¿Cómo hacer para cargar las imágenes de una página al estilo de Google Image con Mootools?

La verdad es muy sencillo y fue publicado por el blog de David Walsh, éste utiliza el plugin Moootools LazyLoad.

Implementación

Primero enlazamos la biblioteca Mootools:

<script type="text/javascript" src="mootools-1.2.4.js"></script>

El siguiente es el código que necesitamos para implementar la funcionalidad:

//nueva instancia
var lazyload = new LazyLoad({
//onLoad event/option
onLoad: function(img) {
//set opacity to 0, fade it in!
img.setStyle('opacity',0).fade(1);
}
});

Todo el efecto se logra sin modificaciones al plugin. Igualmente no funciona en navegadores basados en Webkit. También con IE presenta algunos problemas que son abordados en el post original (en inglés).

Fade Images with MooTools LazyLoad

Sitio: davidwalsh.name/lazyload-fade

Related Posts Plugin for WordPress, Blogger...


Desarrollador de software egresado de la Universidad Católica de Argentina, blogger y fotógrafo.

Trackbacks/Pingbacks

  1. Bitacoras.com - 01/10/2010

    Información Bitacoras.com…

    Valora en Bitacoras.com: La renovada interfaz de Google Images muestra los resultados y a media que vamos bajando la página, nuevas imágenes son cargadas. Pero ¿Cómo hacer para cargar las imágenes de una página al estilo de Google Image con Moo……

  2. Tweets that mention Mootools – Cómo cargar las imágenes de una página web al estilo de Google Image | Pixelco blog -- Topsy.com - 01/10/2010

    […] This post was mentioned on Twitter by Pixelco – Diego, Pixelco – Diego. Pixelco – Diego said: Mootools – Cómo cargar las imágenes de una página web al estilo de Google Image http://goo.gl/fb/shDHF – Pixelco […]

Comentario

Google+