mooHug - Plugin para mootools y galerias de imagen

Articulos / Mootools / mooHug - Plugin para mootools y galerias de imagen /

mooHug - Plugin para mootools y galerias de imagen

MooHug es un plugin basado en mootools para crear un atractivo efecto al abrir las imágenes de nuestra web.Se trata de un efecto de agrandamiento de las imágenes que desamos.

MooHug es un plugin basado en mootools para crear un atractivo efecto al abrir las imágenes de nuestra web. Básicamente, se trata de un efecto de agrandamiento de las imágenes que deseamos que no se abran en la clásica ventana del explorador. Este, también permite utilizar miniaturas para que nuestra web sea menos pesada y cargar las imágenes completas en el momento de ejecución.

Ventajas:

Es un plugin de mootools, como ya sabemos uno de los mejores y más ligeros frameworks de la actualidad.
Tiene muchas opciones de personalización o adecuación a nuestra web. Podemos modificar los colores de las cajas mediante un css, y a su vez, permite configurar diversos aspectos del efecto, como tiempo, tipo de efecto…

Como se usa:

Para que funcione nuestro plugin tenemos que incluir en nuestro código HTML los archives que se incluyen dentro del pack mooHug.rar
Primero incluimos el css (mooHug.css), después la librería mootools(mootools.js) y el código del plugin(mooHug.js). Después incluimos el código que crea el evento domready y creamos una nueva clase mooHug.

<head>
...
<link href="css/mooHug.css" rel="stylesheet" media="screen, projection" type="text/css" />

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

<script type="text/javascript">
window.addEvent(’’domready’’, function(){
var mymooHug = new mooHug($$(’’.moohug’’));
});
</script>
...
</head>

Dentro de la new mooHug(…) tenemos que indicar cuáles son los elementos a los que queremos que se aplique el efecto. En nuestro caso le pasamos un vector con todos los objetos que pertenezcan a la clase moohug, es decir que tengan la propiedad: class=”moohug” dentro de su etiqueta HTML. Entonces, tan solo tenemos que poner la clase moohug a las imágenes que deseemos.

Opciones:

durationFxOverPhoto: numero en milisegundos de la duración del efecto de opacidad encima de la miniatura.

durationFxResize: numero en milisegundos de la duración del efecto de redimensionamiento de la imagen.

durationFxRepos: numero en milisegundos de la duración del efecto de reposicionamiento de la imagen.

durationFxPhoto: numero en milisegundos de la duración del efecto de aparición de la imagen.

delayFxResize: numero en milisegundos de la duración del efecto de retardo del efecto de redimensionamiento.

delayFxRepos: numero en milisegundos de la duración del efecto de retardo del efecto de reposicionamiento.

delayFxPhoto: numero en milisegundos de la duración del efecto de retardo del efecto de aparición de la foto.

opacityFx: transición elegida para la opacidad.

resizeFx: : transición elegida para la redimensión.

reposFx: : transición elegida para la reposición.

opacityOverPhoto: numero entre 0 y 1. Determina el grado de opacidad 0:transparente y 1:opaco.

toleranceW: numero en pixeles de los márgenes laterales que deseamos que las imágenes no traspasen.

toleranceH: numero en pixeles de los márgenes verticales que deseamos que las imágenes no traspasen.

desviationX: si lo definimos como diferente de 0, las imágenes se desplazaran respecto de la miniatura esta cantidad de pixeles.

padding: numero en pixeles de borde de la imagen.

En el ejemplo podemos ver como modificar estas opciones en la declaración de la clase.

Compatibilidad:

Totalmente compatible con los exploradores de clase A (Internet Explorer 6+, Opera 9, Firefox 1.5+ y Safary 3+).

Requerimientos:

Descargar MooTools 1.2.3 con los siguientes módulos:
     •Element.Dimensions
     •Fx.Tween
     •Fx.Morph
     •Selectors
     •DomReady

Descarga:

Demo
Descarga mooHug.rar     NUEVO

Log de cambios:

1.0 rc1 (08/10/2009)
     Versión inicial para mootools 1.2.3.