Allineamento verso l'alto e verso il basso di due elementi in un div

[ivanisevic82]

Ciao a tutti, avrei bisogno di apportare una modifica al mio codice, ma ho difficoltà a farlo.

Questo è il codice "originario" da testare con un semplice copia/incolla, pronto all'uso:

<div class="gallery-section">

<div class="colonna-sinistra">


<div class="testo">
La sede dello studio è a Firenze, al numero 86 dell'elegante e tranquilla Via Massaia, immersa nel verde e caratterizzata da una buona facilità di parcheggio.
</br>
Gli orari dello studio</br>
Dal lunedì al venerdì 9:00 - 13:00</br>
15:00 - 19:00</br>
</div>


    <div class="thumbnails">
    
    <div class="img-parent">
       <img src="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/1n.jpg" data-full="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/1n.jpg" alt="Immagine 1" onclick="showFullImage(this)">
    </div>
    <div class="img-parent">
       <img src="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/2n.jpg" data-full="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/2n.jpg" alt="Immagine 2" onclick="showFullImage(this)">
    </div>
    <div class="img-parent">
       <img src="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/3n.jpg" data-full="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/3n.jpg" alt="Immagine 2" onclick="showFullImage(this)">
     </div>
     <div class="img-parent">
       <img src="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/4n.jpg" data-full="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/4n.jpg" alt="Immagine 2" onclick="showFullImage(this)">
     </div>
     <div class="img-parent">
       <img src="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/5n.jpg" data-full="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/5n.jpg" alt="Immagine 2" onclick="showFullImage(this)">
     </div>    
     <div class="img-parent">
       <img src="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/6n.jpg" data-full="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/6n.jpg" alt="Immagine 2" onclick="showFullImage(this)">
    </div>
    
    </div>


</div>
    
    <div class="full-image">
        <img src="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/1n.jpg" alt="Immagine grande">
    </div>
    
</div>


<style>
.gallery-section {
display: flex;
justify-content: space-between;
}


.colonna-sinistra {
width: 33.3%;
padding-right: 3.2%;
display: flex;
flex-direction: column;
justify-content: space-between;
}


.thumbnails {
display: grid;
grid-template-columns: repeat(3, 1fr);  /* Dividi in 3 colonne */
grid-gap: 15px;  /* Spazio tra le immagini */
}


.thumbnails img {
cursor: pointer;
width: 100%;  
transition: transform .3s ease, filter .3s ease-in-out;
filter: brightness(100%), filter .3s ease-in-out;
}


.thumbnails img:hover { 
transform: scale(1.2);
filter: brightness(85%);
}


.full-image {
flex: 1;
padding-left: 2%;
}


.full-image img {
width: 100%;
border: 1px solid #888;
}


.img-parent {
overflow: hidden; 
border: 1px solid #888;
}


</style>


<script>
function showFullImage(thumbnailElement) {
    const fullImageUrl = thumbnailElement.getAttribute('data-full');
    const fullImageContainer = document.querySelector('.full-image img');
    fullImageContainer.setAttribute('src', fullImageUrl);
}
</script>

Volendo creare un effetto di transizione incrociata al passaggio da un immagine all'altra ho dovuto modificare lievemente la parte html aggiungendo una immagine aggiuntiva per l'effetto "incrociato".
Poi ho modificato il JS.

<div class="gallery-section">

<div class="colonna-sinistra">


<div class="testo">
La sede dello studio è a Firenze, al numero 86 dell'elegante e tranquilla Via Massaia, immersa nel verde e caratterizzata da una buona facilità di parcheggio.
</br>
Gli orari dello studio</br>
Dal lunedì al venerdì 9:00 - 13:00</br>
15:00 - 19:00</br>
</div>


    <div class="thumbnails">
    
    <div class="img-parent">
       <img src="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/1n.jpg" data-full="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/1n.jpg" alt="Immagine 1" onclick="showFullImage(this)">
    </div>
    <div class="img-parent">
       <img src="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/2n.jpg" data-full="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/2n.jpg" alt="Immagine 2" onclick="showFullImage(this)">
    </div>
    <div class="img-parent">
       <img src="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/3n.jpg" data-full="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/3n.jpg" alt="Immagine 2" onclick="showFullImage(this)">
     </div>
     <div class="img-parent">
       <img src="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/4n.jpg" data-full="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/4n.jpg" alt="Immagine 2" onclick="showFullImage(this)">
     </div>
     <div class="img-parent">
       <img src="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/5n.jpg" data-full="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/5n.jpg" alt="Immagine 2" onclick="showFullImage(this)">
     </div>    
     <div class="img-parent">
       <img src="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/6n.jpg" data-full="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/6n.jpg" alt="Immagine 2" onclick="showFullImage(this)">
    </div>
    
    </div>


</div>
    
<div class="full-image">
    <img class="active-img" src="https://www.avvocatobonfiglio.it/wp-content/themes/bonlawtemplate%2051/images/Carousel/1n.jpg" alt="Immagine grande">
    <img class="next-img" src="" alt="Prossima immagine">
</div>
    
</div>


<style>
.gallery-section {
display: flex;
justify-content: space-between;
}


.colonna-sinistra {
width: 33.3%;
padding-right: 3.2%;
display: flex;
flex-direction: column;
justify-content: space-between;
}


.thumbnails {
display: grid;
grid-template-columns: repeat(3, 1fr);  /* Dividi in 3 colonne */
grid-gap: 15px;  /* Spazio tra le immagini */
}


.thumbnails img {
cursor: pointer;
width: 100%;  
transition: transform .3s ease, filter .3s ease-in-out;
filter: brightness(100%), filter .3s ease-in-out;
}


.thumbnails img:hover { 
transform: scale(1.2);
filter: brightness(85%);
}


.full-image {
  flex: 1;
  padding-left: 2%;
  position: relative; /* Aggiunto per posizionamento assoluto delle immagini */
}


.full-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 0.5s; /* Aggiunto per la dissolvenza */
  opacity: 0; /* Inizialmente invisibile */
  border: 1px solid #888;
}


.full-image img.active-img {
  opacity: 1; /* Visibile */
}


.img-parent {
overflow: hidden; 
border: 1px solid #888;
}


.fade-in {
  opacity: 1;
  transition: opacity 500ms;  
}


.fade-out {
  opacity: 0;
  transition: opacity 500ms;  
}


</style>


<script>
function showFullImage(thumbnailElement) {
  const fullImageUrl = thumbnailElement.getAttribute('data-full');
  const activeImage = document.querySelector('.full-image .active-img');
  const nextImage = document.querySelector('.full-image .next-img');


  // Imposta la nuova immagine
  nextImage.setAttribute('src', fullImageUrl);


  // Inizia la dissolvenza incrociata
  activeImage.classList.remove('active-img');
  activeImage.classList.add('next-img');
  
  nextImage.classList.remove('next-img');
  nextImage.classList.add('active-img');
}


</script>

Qual'è il problema? Che il posizionamento assoluto che ho dovuto dare all'immagine ingrandita, ha "rovinato" il layout generale.

Le miniature, che prima era posizionate in basso, ora seguono il testo.
Inoltre anche la distribuzione degli spazi nelle colonne non mi sembra più corretta, come invece era prima.

Potete darmi una mano?

[PER KILLERWORM: non sono impazzito, il sito era "finito", ho concluso anche le attività SEO. Aspetto solo che un mio amico fotografo mi raggiunga per fare le foto "ufficiali". Nell'attesa ho pensato di testare una nuova soluzione per la gallery, eliminando il "lightbox" che c'era prima e semplificando il tutto...]