Crysfel's Blog - Blog geek

)
//Crear el nodo de salida del visor ()
//Crear el nodo para la imagen ()
//Crear el nodo para el texto (

Salir

Se ha logrado lo que se buscaba, pues ay tenemos listo los elementos necesarios, ahora es necesario programar los efectos respectivos, lo que sigue ahora es programar el método aparece, de la clase que definimos anteriormente, este método recibe dos parámetros, la url de la imagen a cargar, y la descripción de la misma, el siguiente es el pseudo código de lo que se codificara.


this.aparece = function(f,t){
//Se asigna a la variable file la url actual
//Se pone visible el visor de imágenes
//Se hace la animación de fade in
//Se asigna la descripción al elemento
//Se carga la imagen
}


Esto, codificado, queda de la siguiente manera


this.aparece = function(f,t){
this.file = f;
$('cvrVisor').style.display = 'block';
var f = new Fx.Style('cvrFondo', 'opacity',{duration:500});
f.set(0);
f.start(0,0.7);
$('cvrDescripcion').setText(t);
this.cargaImagen();
}


Lo único interesante es notar que la le estamos asignando 500 milisegundos a la animación, esta animación se la estamos aplicando al elemento con ID cvrFondo, la opacidad va de 0 a 0.7, esto es el 70% de la opacidad, la función cargaIMagen se describe a continuación.


this.cargaImagen = function(){
$('cvrImagen').style.visibility = 'hidden';
img = new Asset.image(this.file, {id: 'cvrImagen', title:'Imagen', onload: this.redimensionar});
}


Lo que se esta haciendo aquí es ocultar la imagen, al hacer esto es posible ver el cargador en el fondo del contenedor, después cargamos la imagen con la clase Asset, la cual mediante el método image indica cuando ha terminado la carga, de esta manera cuando termine la carga se dispara el método redimensionar el cual analizaremos con mas detalle por se un poco mas interesante.


this.redimensionar = function(){
//Se remplaza la nueva imagen por la anterior
$('cvrImagen').replaceWith(img);
//Se oculta para hacer la animacion de redimension
$('cvrImagen').style.visibility = 'hidden';

//Se inicia la animacion, modificando las siguientes propiedades
efecto.start({
'width': img.getSize().size.x,
'height': img.getSize().size.y + 25,
'top': window.getScrollTop() + window.getHeight()/2 - img.getSize().size.y/2 - 15,
'left': window.getWidth()/2 - img.getSize().size.x/2
});
}


Lo interésate aquí, es que podemos modificar mas de una propiedad de los elementos al mismo tiempo, para eso se utiliza la Styles, a diferencia de la clase Style, esta puede modificar simultáneamente las propiedades que se le definan, en este caso se modificaron cuatro propiedades, el ancho, alto, coordenada en x y coordenada en y, para saber las nuevas posiciones y tamaños, es necesario saber las dimensiones de la nueva imagen, para esto simplemente accedamos mediante img.getSize().size.x para el width, donde img es la referencia al nodo que se ha cargado recientemente, el cual contiene esa información, de la misma manera para el height cambiando únicamente x por y, una vez que se saben las dimensiones de la imagen, se puede calcular fácilmente las coordenadas donde debe quedar centrada, para esto es necesario saber el ancho de la pantalla del usuario, así como el alto, luego unas simples restas de la mitad de todos los datos y listo, el contenedor queda en el centro de la pantalla.

Por ultimo se tiene que crear una instancia de esta clase.


var visor = new VisorImagenes();

window.addEvent('domready', function(){
visor.constructor();
});


Lo que se esta haciendo aquí, es crear la instancia, y luego agregar un evento, este evento se dispara cuando el DOM esta listo, es decir que ya se puede comenzar a trabajar con el, esto es muy util pues no se tiene que esperar a que se carguen todas las imágenes del sitio para comenzar a trabajar, al momento de dispararse el evento, lo que se hace es ejecutar el metodo constructor de la clase VisorImagenes.

Para mostrar una imagen es necesario poner dentro de un boton o un link una llamada al metodo aparecer, con sus respectivos datos.


imagen 1
imagen 2
imagen 3
imagen 4


Si te has dado cuenta, los links son accesibles aún si el usuario tiene desactivado el javascript, la única diferencia es que nuestro visor de imágenes no funcionara, pero se vera la imagen de todas formas.

A continuación expongo el código completo para que copies y pegues en un documento html


"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">

Pues bien, esto ha sido todo, espero pueda servirte, actualmente planeo realizar un plugin para wordpress y de esta manera poder integrar una galería de imágenes, esto para un proyecto que estoy desarrollando.

Antes de terminar quiero agradecer al chaka por proporcionar las imágenes de muestra

Hasta la próxima!!

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.