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

**ivanisevic82** · 26-10-2023, 00:11

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:

codice:

<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.

codice:

<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...]

**KillerWorm** · 26-10-2023, 00:34

Originariamente inviata da ivanisevic82

[PER KILLERWORM: non sono impazzito

buon per te. Comunque sta' tranquillo, fa sempre piacere tenere le castagne sul fuoco...
Appena posso provo a dare uno sguardo, sempre che non si risolva prima.

**ivanisevic82** · 26-10-2023, 17:40

Originariamente inviata da KillerWorm

buon per te. Comunque sta' tranquillo, fa sempre piacere tenere le castagne sul fuoco...
Appena posso provo a dare uno sguardo, sempre che non si risolva prima.

Ho provato in ogni maniera prima di scrivere qui, ormai ho rinunciato, ovviamente nemmeno il mio amico chatgpt mi ha saputo aiutare, se pur in versione 4 e con la "Advanced data analisys" attivata

.

Ad ogni modo, posto uno screenshot (fatto con photoshop) di come vorrei rendere la sezione gallery (quella originaria la trovi sempre sul sito se la vuoi rivedere, non ho cambiato ancora niente).

Sede2-2.jpg

**KillerWorm** · 26-10-2023, 19:37

eccoci...

Cerco di sintetizzare. Certamente il posizionamento assoluto dato alle 2 immagini fa collassare il contenitore (.full-image) dal momento che questo non possiede dimensioni proprie.

A meno di non impostare delle dimensioni per .full-image, potresti impostare come absolute solo l'immagine aggiuntiva (.next-img), lasciando quindi la prima (.active-img) all'interno del flusso dei contenuti ed evitando così che il contenitore collassi.

Andrei quindi ad inserire una regola specifica per .next-img dove impostare il posizionamento assoluto.

Consiglio inoltre di applicare il bordo al contenitore piuttosto che alle immagini al suo interno. Questo permette di avere sempre un bordo ben definito e fisso a prescindere dagli effetti che possono essere applicati alle immagini.

Ancora, consiglio di non impostare il padding nel contenitore. Questo infatti andrebbe ad alterare le proprie dimensioni (anche in base al valore del box-sizing) con la conseguenza che sarà difficile posizionare/dimensionare correttamente le immagini al suo interno.
In questo caso potresti applicare un margin anziché un padding.

Un ultimo consiglio. Per evitare possibili distorsioni al rapporto d'aspetto delle immagini ("aspect ratio") quando il contenitore si ridimensiona in maniera responsive, può essere utile applicare alla immagini object-fit:cover.

Prova ad aggiungere/modificare le seguenti regole:

codice:

.full-image {
  position: relative;
  flex: 1;
  margin-left: 2%;
  border: 1px solid #888;
}
.full-image > .next-img {
  position: absolute;
  left: 0;
}
.full-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s;
}

Nota a margine:

Nel tuo codice, in questa regola c'è un errore (forse di copia-incolla) nel valore applicato a filter:

codice:

.thumbnails img {
[...]
filter: brightness(100%), filter .3s ease-in-out;
}

è riportata una parte del valore che hai applicato alla transizione. Ovviamente non ci sta a fare nulla qui.

**ivanisevic82** · 26-10-2023, 22:29

Ciao Killer, ti ringrazio per il preziosissimo contributo e la consueta disponibilità.

Ho testato le modifiche che mi hai suggerito, ma il risultato raggiunto è lievemente diverso da quello sperato.

In estrema sintesi: con queste modifiche l'altezza complessiva del contenitore è determinata dalla somma del testo+le miniature.
Di conseguenza l'immagine grande sulla destra avrà la sua altezza in dipendenza di tale dimensione complessiva e la larghezza variabile.

Così strutturata la gallery avrebbe a mio avviso poco senso, in quanto l'immagine grande verrebbe mostrata con proporzioni poco fruibili e comunque variabili (dato che la larghezza varia in base alla larghezza della pagina).

Io invece vorrei realizzare qualcosa di diverso: l'immagina grande a destra deve mantenere le due proporzioni e cambiare dimensioni in base alla larghezza della pagina (essendo "flex").

Darà questa immagine a determinare l'altezza complessiva del contenitore.

Di conseguenza l'elemento variabile sarà lo spazio tra il testo (allineato in alto) e le miniature (allineate in basso).

Spero di essermi spiegato, per qualsiasi chiarimento non esitare a chiedere.

Grazie ancora!

**KillerWorm** · 26-10-2023, 22:57

Originariamente inviata da ivanisevic82

con queste modifiche l'altezza complessiva del contenitore è determinata dalla somma del testo+le miniature.
Di conseguenza l'immagine grande sulla destra avrà la sua altezza in dipendenza di tale dimensione complessiva e la larghezza variabile.

Capisco ma questo punto non mi torna nelle prove che ho eseguito sul codice da te postato.

La modifica suggerita dovrebbe funzionare come da te richiesto.

Cerchiamo di capire se hai apportato le modifiche nel modo corretto e se questo ti succede apportando le modifiche sulla tua pagina finale.

Posso pensare che quel mio "aggiungere/modificare" sia stato poco chiaro.

A scanso di equivoci, intendevo dire che vanno rimosse dal tuo codice quelle due regole corrispettive a quelle nel CSS proposto.

Queste vanno quindi rimosse dal tuo CSS:

codice:

.full-image {
  ...
}
.full-image img {
  ...
}

e sostituite col codice proposto, dove c'è poi una ulteriore regola per ".full-image > .next-img"

Hai fatto in questo modo?

**ivanisevic82** · 26-10-2023, 23:26

Ciao Killer, in tutta onestà non avevo capito che .full-image > img fosse uguale a -full-image img (sono stato ingannato dal simbolo ">" e pertanto non avevo applicato quella sostituzione.

Adesso ho sostituito sia .full-image , sia .full-image img con la parti che tu mi hai fornito ed ho aggiunto ex novo .full-image > next-img

Non funziona come vorrei, in quanto l'altezza dell'immagine grande occupa tutta la pagina in altezza.

Così ho modificato il tuo codice cambiando l'height di ".full-image > img" da "100%" a "auto"...e si, così funziona proprio come vorrei!

In realtà alla fine la soluzione l'avevo trovata anche con chatGPT, con il quale tra prove varie ero arrivato a questo soluzione, che però penso sia meno lineare rispetto alla tua (mi fa utilizzare "flex-shrink" che nemmeno conoscevo...).

codice:

<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="spacer"></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;
max-width: 1400px;
align-items: stretch;
}


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


.testo {
flex-shrink: 0;
}


.thumbnails {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 15px;
flex-grow: 0;  
}


.spacer {
flex-grow: 1; 
}


.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 img {
top: 0;
left: 0;
width: 100%;
transition: opacity 0.5s; /* Aggiunto per la dissolvenza */
opacity: 0; /* Inizialmente invisibile */
}


.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;  
}


.full-image {
position: relative;
border: 1px solid #888;
flex-shrink: 1;
width: 66.7%;  /* Aggiunto per impostare la larghezza */
flex: none;  
}


.full-image > .next-img {
position: absolute;
left: 0;
}


.full-image > img {
width: 100%;
height: auto;
opacity: 0;
transition: opacity 0.5s;
}


</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>

Ad ogni modo, per ora va bene così e salvo tuo avviso contrario, userei il "nostro" codice e non l'ultimo condiviso medicato da ChatGPT.

Ovviamente ho altre modifiche da apportare, mi metto a lavoro e tengo questo topic come punto d'appoggio per eventuali altre domande o necessità connesse.

**KillerWorm** · 27-10-2023, 00:29

Originariamente inviata da ivanisevic82

in tutta onestà non avevo capito che .full-image > img fosse uguale a ...

colpa mia

... quel ">" indica che img deve essere considerato solo quando è figlio diretto di .full-image

Per quanto possibile tendo sempre a prevenire eventuali, seppur remoti, effetti collaterali... Sia mai che, per qualche arcano motivo, tu vada ad inserire dentro quel contenitore un qualche altro elemento (magari per questioni funzionali) in cui è contenuto un qualche img; chiaramente in questo caso non dovrà essere considerato come una immagine della gallery.

Il problema è che nella mia testa appare logico, per questo spesso do per scontato che non serve dare ulteriori indicazioni ma evidentemente sbaglio

Originariamente inviata da ivanisevic82

salvo tuo avviso contrario, userei il "nostro" codice

Niente in contrario, puoi valutare tu ciò che ti sembra meglio.

Originariamente inviata da ivanisevic82

tengo questo topic come punto d'appoggio per eventuali altre domande o necessità connesse

Quando vuoi

Buon proseguimento

**ivanisevic82** · 31-10-2023, 12:08

Rieccomi qui...
Ho apportato qualche modifica al layout volendo integrare nella sezione in oggetto anche una piccola mappa.

Ho quindi posizionato (più canonicamente) le miniature sotto l'immagine principale.

Mi succede tuttavia una cosa strana con il bordo, che ho assegnato ad un div contenitore della predetta immagine: al momento della transizione tra una immagine e l'altra, quest'ultima viene spostata di 1px in basso e copra il bordo inferiore, destro e sinistro. Finita la transizione torna normale.

Non risco a capire da cosa possa dipendere...ecco il codice completo:

codice:

<div class="gallery-section">

<div class="colonna-sinistra">


<div id="testo-gallery">
La sede dello studio è a Firenze, in Via Guglielmo Massaia n. 86, strada elegante e tranquilla, immersa nel verde e caratterizzata da una buona facilità di parcheggio.
<div id="orari">
<div id="apertura">Orari di apertura</div>
Lun - Ven | 9:00 - 13:00 | 15:00 - 19:00
</div>
</div>


<div class="maps"><div class="mappa_contatti_gallery"></div></div>


</div>
    
<div class="full-image">
<div class="image-outer-wrapper">
<div class="image-wrapper">
    <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>
        <div class="thumbnails">
    
    <div class="img-parent-gallery">
       <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">
    </div>
    <div class="img-parent-gallery">
       <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">
    </div>
    <div class="img-parent-gallery">
       <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">
     </div>
     <div class="img-parent-gallery">
       <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">
     </div>
     <div class="img-parent-gallery">
       <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">
     </div>    
     <div class="img-parent-gallery">
       <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">
    </div>
    
    </div>
    
</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: flex;
justify-content: center; 
align-items: center; 
grid-template-columns: repeat(3, 1fr); 
grid-gap: 15px;
width: 100%;
grid-template-columns: repeat(3, 1fr); 
margin-top: 20px;
}


.thumbnails img {
cursor: pointer;
width: 100%;  
transition: transform .3s ease, filter .3s ease-in-out;
vertical-align: bottom;
}


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


.full-image .image-wrapper img.active-img {
opacity: 1; 
}


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


.img-parent-gallery:hover {
border-color: #666;
}


.full-image {
position: relative;
flex: 1;
margin-left: 2%;
display: flex;
flex-direction: column;
align-items: center;
}




.full-image .next-img {
position: absolute;
left: 0;
}


.full-image .image-wrapper img {
width: 100%;
height: auto;
object-fit: cover;
opacity: 0;
transition: opacity 0.8s;
vertical-align: bottom;
}


.image-wrapper {
border: 1px solid #a9a9a9;
}


.thumbnails img.active-thumbnail {
transform: scale(1.2);
filter: brightness(75%);
}


.img-parent-gallery.selected-thumbnail {
border-color: #666;
}


#testo-gallery {
font-size: 17px;
}


#orari {
margin-top: 15px;
}


#apertura {
font-weight: 600;
}


.mappa_contatti_gallery {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%; 
border: 1px solid #ccc; 
}


.maps::before {
content: "";
display: block;
padding-top: 100%;  /* Aspect Ratio */
}


</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
  let currentImageIndex = 0;
  let intervalId;


  function showFullImage($thumbnailElement) {
    const fullImageUrl = $thumbnailElement.data('full');
    const $activeImage = $('.full-image .active-img');
    const $nextImage = $('.full-image .next-img');


    $nextImage.attr('src', fullImageUrl);


    $activeImage.removeClass('active-img').addClass('next-img');
    $nextImage.removeClass('next-img').addClass('active-img');


    // Rimuovi le classi 'active-thumbnail' e 'selected-thumbnail' da tutti gli elementi
    $('.thumbnails .img-parent-gallery').removeClass('selected-thumbnail');
    $('.thumbnails .img-parent-gallery img').removeClass('active-thumbnail');


    // Aggiungi le classi 'active-thumbnail' e 'selected-thumbnail' agli elementi corrispondenti
    $thumbnailElement.closest('.img-parent-gallery').addClass('selected-thumbnail');
    $thumbnailElement.addClass('active-thumbnail');


    currentImageIndex = $('.thumbnails .img-parent-gallery img').index($thumbnailElement);
  }


  function autoRotateImages() {
    const $thumbnailElements = $('.thumbnails .img-parent-gallery img');
    currentImageIndex = (currentImageIndex + 1) % $thumbnailElements.length;
    showFullImage($($thumbnailElements[currentImageIndex]));
  }


  // Inizializza la selezione della prima miniatura al caricamento della pagina
  showFullImage($($('.thumbnails .img-parent-gallery img')[0]));


  intervalId = setInterval(autoRotateImages, 3000);


  $('.thumbnails').hover(
    function() {
      clearInterval(intervalId);
    },
    function() {
      intervalId = setInterval(autoRotateImages, 3000);
    }
  );


  $('.thumbnails .img-parent-gallery img').click(function() {
    showFullImage($(this));
  });
});
</script>

**ivanisevic82** · 31-10-2023, 12:28

Scusate il doppio post, ho risolto andandomi a rivedere le "lezioni" di Killer sugli pseudoelementi:

codice:

.image-wrapper {overflow: hidden;
position: relative;
}


.image-wrapper::before {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
border: 0px solid #a9a9a9;
border-width: 1px;
}

Grazie!!!

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

Strumenti discussione

Ricerca discussione

Visualizza

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

Permessi di invio