Come modificare colore, opacità e icona di chiusura del Lightbox nativo di Blogger.

Come personalizzare il Lightbox nativo di Blogger modificandone il colore, l'icona di chiusura e il livello di opacità.

Il Lightbox è un javascript che permette di visualizzare immagini e video che riempiono lo schermo oscurando contemporaneamente il resto della pagina. Il primo Lightbox fu realizzato da Lokesh Dhakar ma da allora questa tecnica è stata utilizzata da altre librerie simili.  Il suo successo è dovuto anche alla sua natura open source e a essere stato integrato nella libreria jQuery. Anche su Blogger è stato inserito un effetto che ricorda il Lightbox ed è chiamato proprio in questo modo per abuso di linguaggio.

Il Lightbox nativo di Blogger può essere attivato o disattivato andando su Impostazioni > Post e Commenti > Mostra Immagini su Lightbox per poi selezionare Si invece di No. Con il Lightbox attivato quando un lettore clicca sopra a una foto presente in un post questa verrà messa in evidenza, il resto del layout sarà oscurato lasciando vedere la pagina solo in trasparenza. Nella parte bassa si visualizzeranno tutte le miniature delle immagini presenti nella pagina che potranno essere navigate con  il mouse mentre in alto a destra si vedrà la crocetta per chiudere il Lightbox. Si potrà chiudere comunque cliccando in un qualsiasi punto dello sfondo.  Ecco un esempio in questo screenshot

 

Si possono modificare alcuni aspetti del Lightbox nativo per renderlo più aderente alle nostre esigenze. Le prime cose che vengono in mente sono il colore dello sfondo e la sua opacità. Il colore nero e una opacità quasi totale nascondono infatti quasi completamente alla vista il resto della pagina. Vediamo come procedere per personalizzare il Lightbox mostrando un codice di esempio che può essere modificato nei codici dei colori e in altri parametri.

Dopo aver salvato il template si va su Modello > Modifica HTML, si cerca la sezione <b:skin> e si clicca sulla freccetta nera alla sua sinistra per visualizzare tutto il codice dei CSS. Con Ctrl+F si cerca l'ultima riga della sezione che è ]]></b:skin> quindi subito sopra si incolla questo codice

/* Colore di sfondo */
.CSS_LIGHTBOX_BG_MASK {
background-color: #fff !important;
opacity: 0.7 !important;
filter: alpha(opacity=70) !important;
}
/* Bordi e ombreggiatura 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;
}
/* Cambiare il pulsante di chiusura */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvPWS0_Z4FkM0ZipCiNMJy-9Zfam8VhAwWPOV46EjAaSyJpnNQJVt8HFqowRSOzHklMtMwDi8TvuVdWo9h02gBD8XN4z9DDgYzAodLmvR6Pn50zb_z7lkmQMhAQQ6GOB5UyDeD7b7SuDE/s24/close.png) no-repeat !important;
width: 20px !important;
height: 20px !important;
}
/* Colore della barra e del bordo delle miniature */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #dadada !important;
border-top:1px solid #c1c1c1!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: #333 !important;
}

Dopo aver salvato il modello se si clicca su una immagine il Lightbox sarà diverso

Specialmente con una minore opacità si riuscirà anche a visualizzare il resto della pagina oltre alla immagine posta in primo piano. I più esigenti possono anche mostrare una immagine di sfondo nel Lightbox modificando il primo blocco di codice 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;
}

Il risultato sarà il seguente

con nello sfondo anche una immagine insieme al resto del layout. Tale immagine di sfondo sarà vista solo quando il lettore cliccherà su una immagine e non durante la normale navigazione. Quando si modifica l'opacità questo va fatto coerentemente nei due parametri opacity: 0.8 e (opacity=80).