Mejorar la galería circular con JavaScript

Tras enfrentarte al primer trabajo evaluable de la asignatura, ya estás en disposición de apreciar las fortalezas de la combinación de HTML y CSS, pero también algunas de sus debilidades actuales. Así pues, seguro que añadir un toque de JavaScript a la combinación, incluso con lo poco que todavía sabemos de la potencia del lenguaje, puede mejorar varios aspectos de la galería presentada por tu grupo de trabajo.

Concretamente, se pide que utilices JavaScript para intentar mejorar los siguientes aspectos de la galería, teniendo en cuenta que tus modificaciones has de aplicarlas a una copia de esa galería (y no a la galería misma, pues ésa ha de permanecer intacta mientras esté siendo evaluada):

• CSS independiente del número de imágenes de la galería, de forma que añadir una nueva imagen o eliminar alguna otra sólo suponga modificar el HTML mínimamente. El código JavaScript puede construir una lista (Array) de imágenes a partir del HTML, obtener su longitud y calcular las declaraciones de estilo pertinentes para mantener el aspecto y el comportamiento de la galería circular. Puede que encuentres útil acceder al atributo length de la lista y a los atributos del atributo style de los elementos HTML implicados, todo ello dentro de un bucle for.
• Centrado de imágenes cualesquiera en un marco propio de tamaño fijo con carácter general. Se trata de:
  • No limitarse a un tipo de imagen (verticales o apaisadas) ni tener que indicar explícitamente ese tipo en el HTML.
  • No utilizar en el HTML elementos div estructuralmente superfluos alrededor de cada img.
  • No tener que limitarse a Opera, ahora que es el único navegador que ofrece object-fit: contain.
  • No tener que sacar las imágenes del HTML para incluirlas como background-image en el CSS (con background-size: contain) siendo, como son, contenido de la galería y no meros detalles de su formato.
  Puede que encuentres útil acceder a los atributos naturalHeight y naturalWidth de las imágenes para lectura y a los atributos sus atributos style para escritura.
• No llevar a cabo ningún cálculo matemático a mano, evitar la proliferación de números mágicos en el CSS... obviamente, no para trasladarlos tal cual al código JavaScript, sino para sustituirlos por los cálculos adecuados cuando proceda.
• Ampliación del número de navegadores en los que la galería funciona correctamente, y no replicando manualmente propiedades experimentales en el CSS, sino:
  • Si las réplicas funcionan, implementándolas mediante bucles for en JavaScript, haciendo uso de una lista como la siguiente:

    PREFIJOS = new Array("", "-moz-", "-o-", "-webkit-");
    

  • Si las réplicas no funcionan, programando directamente el comportamiento deseado en JavaScript.

Recuerda que, aparte de utilizar nuestro foro de consultas en Aula Virtual, hay numerosos recursos sobre JavaScript en la Web, por ejemplo una guía de aprendizaje de W3Schools.

Y, por supuesto, puedes optar por seguir trabajando en grupo si la experiencia te ha parecido, por ahora, positiva.