Come posso aggiungere un effetto lightbox per ingrandire le immagini dei post a schermo intero con un clic?

 

Per aggiungere un effetto lightbox fluido e moderno che permetta ai lettori di ingrandire a schermo intero qualsiasi immagine presente nei post con un semplice clic, puoi implementare una soluzione leggera basata su CSS e un piccolo script JavaScript nativo.

Questo approccio non richiede librerie esterne pesanti, si integra perfettamente con il design del tuo blog e gestisce automaticamente lo zoom, lo sfondo scuro sfumato e la chiusura tramite tasto ESC o clic fuori dall'immagine.

1.Aggiungi la grafica e l'animazione della modale:Stile CSS.

Accedi alla dashboard di Blogger, seleziona Tema, clicca sui tre puntini accanto a Personalizza e scegli Modifica HTML.

Individua il tag di chiusura ]]></b:skin> e inserisci subito prima questo codice CSS:

CSS

/* Cambia il cursore al passaggio sulle immagini dei post */
.post-body img {
  cursor: zoom-in;
  transition: transform 0.2s ease;
}

/* Struttura dell'overlay Lightbox */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  box-sizing: border-box;
  padding: 20px;
}

/* Stato attivo (quando la modale è aperta) */
.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Immagine ingrandita all'interno della modale */
.lightbox-content {
  max-width: 90%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.lightbox-overlay.active .lightbox-content {
  transform: scale(1);
}

/* Pulsante di chiusura (X) */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 36px;
  cursor: pointer;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.lightbox-close:hover {
  opacity: 1;
}

Verifica: Le regole CSS definiscono l'aspetto della modale a schermo intero e l'effetto visivo del cursore sulle immagini.

2.Aggiungi lo script di gestione del click:Logica JavaScript.

Sempre nell'editor HTML, posizionati subito prima del tag di chiusura </body> e incolla questo script. Si occuperà di generare dinamicamente il contenitore della lightbox e di attivarlo al clic su qualsiasi immagine dell'articolo:

HTML

<script>
  document.addEventListener("DOMContentLoaded", function() {
    const postBody = document.querySelector(".post-body");
    if (!postBody) return;

    const images = postBody.querySelectorAll("img");
    if (images.length === 0) return;

    // Crea la struttura HTML della lightbox in modo dinamico
    const overlay = document.createElement("div");
    overlay.className = "lightbox-overlay";

    const imgContent = document.createElement("img");
    imgContent.className = "lightbox-content";

    const closeBtn = document.createElement("button");
    closeBtn.className = "lightbox-close";
    closeBtn.innerHTML = "&times;";
    closeBtn.title = "Chiudi";

    overlay.appendChild(imgContent);
    overlay.appendChild(closeBtn);
    document.body.appendChild(overlay);

    // Associa l'evento di apertura a ogni immagine del post
    images.forEach(img => {
      img.addEventListener("click", function() {
        imgContent.src = this.src;
        overlay.classList.add("active");
        document.body.style.overflow = "hidden"; // Blocca lo scroll della pagina sottostante
      });
    });

    // Funzione per chiudere la lightbox
    function closeLightbox() {
      overlay.classList.remove("active");
      document.body.style.overflow = ""; // Ripristina lo scroll
    }

    closeBtn.addEventListener("click", closeLightbox);
    
    // Chiude cliccando sullo sfondo scuro
    overlay.addEventListener("click", function(e) {
      if (e.target === overlay) {
        closeLightbox();
      }
    });

    // Chiude premendo il tasto ESC sulla tastiera
    document.addEventListener("keydown", function(e) {
      if (e.key === "Escape" && overlay.classList.contains("active")) {
        closeLightbox();
      }
    });
  });
</script>

Verifica: Lo script riconosce tutte le immagini dei post senza bisogno di modificare manualmente l'HTML di ogni articolo.

3.Salva e verifica sul blog:Salvataggio e Test.

Clicca sull'icona del dischetto in basso a destra per salvare le modifiche al tema. Apri un articolo che contiene delle foto o delle illustrazioni.

Verifica: Passando il mouse sopra un'immagine vedrai il cursore trasformarsi in una lente d'ingrandimento. Cliccandoci sopra, l'immagine si aprirà fluidamente a schermo intero su sfondo scuro, bloccando lo scroll e permettendo di richiuderla con la "X", con il tasto ESC o cliccando sullo sfondo.