.animate y función de escalado

[MadDunDee]

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!

[MadDunDee]

He descubierto que se trata de un problema de velocidad en al ejecución de funciones. De hecho ralentizando la ejecución de resize() si consigo hacerla funcionar. Pero claro, ahora lo que tengo es una animación, primero del contenedor y a los 500ms siguientes la animación del contenido. Y lo que me gustaría es que el escalado de ambos elementos se produjera al mismo tiempo para así tener un efecto suave de los dos.

Alguien sabría decirme si es posible lanzar los dos funciones al mismo tiempo según este planteamiento? Si es necesario cambiarlo lo cambio, seguramente no sea ni correcto hacerlo como lo estoy haciendo ahora.

Ahora en changeView tengo lo siguiente:

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()");  
            setTimeout(function() { resize(); }, 510);  
    }  
   

Como veis espero a que la animación del contendor se produzca y luego se produce la del contenido. ¿Qué opináis?

[MadDunDee]

Estoy haciendo algunas pruebas con las colas queue() para controlar las funciones y cómo se ejecutan estas. El caso es que no consigo los resultados que necesito por ahora.

¿Me podría decir alguien si voy bien encaminado desde este punto de vista?

Gracias!