Come personalizzare il Lightbox nativo di Blogger.

Come personalizzare nei colori e nelle icone il Lightbox nativo di Blogger e come disabilitarlo.

Quando il lettore clicca su una immagine pubblicata in un post di Blogger questa viene evidenziata a grandezza naturale oscurando parzialmente tutto il resto del layout. Questo effetto è denominato Lightbox e Blogger lo ha introdotto in modo nativo qualche anno fa. In basso si visualizzerà una barra con le miniature di tutte le immagini presenti nella pagina su cui il lettore potrà cliccare per visualizzarle rapidamente nella stessa modalità.  Blogger dà però la possibilità di disattivare il Lightbox nativo andando su Impostazioni > Post e Commenti e scegliendo No su Mostra Immagini con Lightbox.

Usando dei tool tipo Ispeziona elemento, Firebug per Firefox o Firebug Lite possiamo determinare quali siano i selettori delle classi del Lightbox per poterlo modificare nei colori o in altri parametri. Possiamo cioè passare da un Lightbox classico come questo

 

a uno come quest'altro decisamente meno tetro

con i bordi arrotondati e con una diversa crocetta di chiusura. Per questa personalizzazione possiamo andare su Modello > Personalizza > Avanzato > Aggiungi CSS e incollare questo codice

/* Colore di sfondo */
.CSS_LIGHTBOX_BG_MASK {
background-color: #fff !important;
opacity: 0.8 !important;
filter: alpha(opacity=80) !important;
}
/* Bordi delle immagini */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: 0px 0px 4px #000;
-moz-box-shadow: 0px 0px 4px #000;
box-shadow: 0px 0px 4px #000;
}
/* Bottone di chiusura */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvPWS0_Z4FkM0ZipCiNMJy-9Zfam8VhAwWPOV46EjAaSyJpnNQJVt8HFqowRSOzHklMtMwDi8TvuVdWo9h02gBD8XN4z9DDgYzAodLmvR6Pn50zb_z7lkmQMhAQQ6GOB5UyDeD7b7SuDE/s32/close.png) no-repeat !important;
width: 24px !important;
height: 24px !important;
}
/* Colore barra delle miniature */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #ebebeb !important;
border-top:1px solid #d1d1d1!important;
}
/* Colore del testo */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}
/* Colore del numero delle immagini */
.CSS_LIGHTBOX_INDEX_INFO {
color: #444 !important;
}

Si va su Invio dopo aver posizionato il cursore dopo l'ultima parentesi graffa quindi si clicca su Applica al blog. Se avete un template molto personalizzato può essere rischioso andare su Personalizza e allora questo codice può essere incollato subito sopra la riga ]]></b:skin> del template per poi salvare il modello. Ogni blocco di codice ha un commento che indica a che aspetto del Lightbox si riferisce.  Possono essere variati i parametri dei codici dei colori, dell'ampiezza dell'arrotondamento, della quantità di opacità e di ombreggiatura.  È presente anche l'URL di una nuova icona per chiudere il Lightbox che ovviamente può essere sostituita da un'altra.

Volendo si può mostrare anche una immagine di sfondo nel nostro Lightbox. Basta modificare il relativo blocco di codice inserendo una foto di background che prenda tutto il layout e che sarà comunque opacizzata. Il codice relativo diventerà cioè in questo modo

/* Colore di sfondo */.CSS_LIGHTBOX_BG_MASK {
background-color: #fff !important;
background-image: url(URL_IMMAGINE_SFONDO) !important;
opacity: 0.8 !important;
filter: alpha(opacity=80) !important;
}

Ricordo che l'opacità può essere modificata in modo coerente p.e opacity: 0.9 e alpha(opacity=90).