Come personalizzare il Lightbox di Blogger

Come personalizzare il Lightbox nativo di Blogger modificando colore dello sfondo, opacità, icona di chiusura, colori dei numeri, bordi e arrotondamento delle immagini

Nei blog di Blogger è possibile attivare quello che viene chiamato Lightbox, una funzionalità inserita nativamente in Blogger che si rifà all'omonimo effetto inserito nei siti tramite libreria javascript.

Con il Lightbox attivato, quando si clicca su una immagine che abbia il link alla sua sorgente, allora le immagini verranno visualizzate a grandezza naturale oscurando parzialmente tutto il resto della pagina. In basso verranno mostrate le miniature di tutte le immagini presenti nella pagina e in alto a destra ci sarà una icona di una crocetta per chiudere il Lightbox.

Il lettore potrà cliccare sopra alla miniatura per vedere a grandezza naturale l'immagine a cui si riferisce. Le immagini potranno essere navigate anche con la rotellina del mouse, che ci permetterà di spostarsi da una foto all'altra.

Per abilitare il Lightbox nativo di Blogger, occorre andare su Impostazioni -> Post, Commenti e Condivisione -> Mostra immagini con Lightbox. Si sceglie Sì quindi si va in alto su Salva impostazioni. Questo non è sufficiente per visualizzare le immagini con il Lightbox perché quest'ultime dovranno essere inserite con il link alla sorgente della immagine. Mi spiego meglio.

Se le immagini vengono pubblicate con l'Editor di Blogger, non ci sono problemi perché le immagini vengono automaticamente pubblicate con il link alla sorgente. Ci se ne può rendere conto andando su HTML. Verrà visualizzato un codice con una struttura simile a questo

<div class="separator" style="clear: both; text-align: center;">
<a href="URL_IMMAGINE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="335" data-original-width="590" height="181" src="URL_IMMAGINE" width="320" /></a></div>

dove URL_IMMAGINE è ripetuto due volte. La prima è il link alla immagine, inserito con il tag href mentre il secondo è l'immagine vera e propria essendo nel campo del tag src. Le dimensioni mostrate nel codice e l'allineamento al centro sono solo a titolo di esempio.

Chi utilizza Open Live Writer per pubblicare i post su Blogger deve selezionare l'immagine, quindi andare su Picture Tools e, in Link to, scegliere Source picture per poi pubblicare il post come al solito. Solo così le immagini pubblicate con OLW saranno visualizzabili e navigabili tramite Lightbox.

Ecco un esempio di come si presenta il Lightbox di default sul Blogger.

L'obiettivo di questo post sarà quello di personalizzarne l'aspetto per mostrarlo per esempio in questo modo.

Sono stati modificati la icona di chiusura, il colore di sfondo, i bordi delle immagini, il colore della barra di miniature, il colore del testo e il colore del numero delle immagini.

Dopo aver salvato il template, si va su Tema -> Modifica HTML e si cerca la riga ]]></b:skin>. Subito sopra a questa riga, si incolla questo codice personalizzabile

/* 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;
border-radius: 8px;
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: 32px !important;
height: 32px !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;
}

quindi si salva il Tema. Possono essere personalizzati i codici dei colori, l'URL della icona di chiusura, il raggio di arrotondamento e l'ombreggiatura delle immagini.

Volendo si può mostrare anche una immagine di sfondo nel Lightbox di Blogger. Bisogna modificare il primo blocco di codice, inserendo una foto di background, che prenda tutto il layout, e che potrà comunque essere opacizzata. Il codice relativo diventerà quindi così

/* 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;
}

Le classi CSS ,relative ai vari elementi del Lightbox nativo di Blogger, sono state trovate con il tool Ispeziona di Chrome. Infine l'opacità deve essere modificata solo in modo coerente, p.e. opacity:0.9 e opacity=90.