Hola!
Estoy montando una galería que depende de varios factores y realiza una serie de escalados para ajustar las imagenes. El caso es que necesito que cuando se hace click en un "disparador"/botón el contenedor principal ocupe prácticamente todo el espacio visible del viewport y las imagenes que contiene se escalen respetando si ratio.
Estoy siguiendo esta
referencia
El comportamiento que no consigo realizar es el de ampliar la imagen. Cuando clicas sobre una de ellas los thumbs desaparecen y la imagen principal se escala. Para ello mi código es el siguiente:
La función que utilizo para ampliar las imagenes las hago en base a un pequeño artículo que leí sobre el método .animate de jquery:
Código PHP:
function resize(){
gallery = $('#items');
galleryH = gallery.height();
$('#items img').each(function() {
var height = $(this).height();
$(this).stop(true).animate({'height':galleryH},1000);
});
}
resize();
Según este método "animando" solo el alto el ancho se escala automáticamente manteniendo así el ratio. Lo cual parece funcionar correctamente. Como veis se escala en lo alto en función del alto de su contenedor.
Bien, esto funciona cuando se carga la página y cuando se escala el tamaño de la ventana. Hasta aquí bien. Luego lo que necesito es que cuando se clica sobre el contenedor o cualquier otro botón el propio contenedor ocupe toda la ventana, similar a lo que sucede en el ejemplo que adjuntaba, y las imagenes se escalen en función de este tamaño. Como en el ejemplo. Para ello utilizo el siguiente código:
Código PHP:
function changeView(){
if(gallery.hasClass("largeExp")){
gallery.removeClass("largeExp");
gallery.stop(true).animate({'height':'200px'},500);
console.log("Normal Mode");
}
else{
gallery.addClass("largeExp");
gallery.stop(true).animate({'height':'650px'},500);
console.log("Expand Mode");
}
console.log("Ahora debería de lanzar resize()");
resize();
}
$('#items').click(function() {
changeView();
});
Pues bien, lo que sucede es que la galería (el contenedor) efectivamente se "anima" con esas medidas pero las imagenes contenidas dentro no. resize(); solo comienza a funcionar a partir del segundo click. En el primero la galería se hace grande, en el segundo las imagenes se escalan al tamaño grande mientras la galería pasa al tamaño pequeño o modo normal.
No tengo mucha experiencia en JS y seguro que estoy haciendo algo mal. Así que espero que me podáis ayudar, llevo un montón de horas perdidas con esto!
En cualquier caso y como siempre, muchísimas gracias!