Pubblicato il 10/04/14e aggiornato il

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

lightbox-nativo-blogger 

a uno come quest'altro decisamente meno tetro

lightbox-personalizzato

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://lh3.googleusercontent.com/-SAmoxgRIWr0/U0ZccEp8AFI/AAAAAAAAmnM/v1TLqC71So4/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).




12 commenti :

  1. Ho provato questa personalizzazione e devo farti i miei complimenti perché non è davvero niente male. Ho solo tralasciato la parte sul bottone di chiusura perché il quadratino rosso mi viene in parte tagliato.

    RispondiElimina
    Risposte
    1. Sì, l'ho notato anch'io in fase di test. Bisognerebbe diminuire un po' le dimensioni
      @#

      Elimina
    2. Viene bene anche lasciando il bottone di chiusura originale. ;)

      Ah... tanti auguri di Buona Pasqua.

      E.

      Elimina
  2. Non funziona...in nessun modo nè aggiungendo un css , nè modificando l'html ...
    quale può essere stato il problema ,ho copiato pari pari il codice sopra!

    RispondiElimina
    Risposte
    1. Hai copiato pedissequamente il codice senza immagine, lo hai incollato su Avanzato > Aggiungi CSS e hai applicato al blog la modifica? Dovrebbe funzionare. Forse non hai salvato bene o forse hai un modello talmente personalizzato che ha dei CSS diversi anche per il Lightbox
      @#

      Elimina
  3. si il blog penso sia personalizzato...perchè ho scelto un modello diverso dal preimpostato da blogger(anche se è il più semplice) e poi ho inserito qualche modifica al navbar e altre cose per renderlo molto pulito ed essenziale!
    Ho seguito entrambe le guide..sia usando l'aggiunta del CSS che modificando il modello html come spiega l'altra guida ma niente!
    In realtà l'ho provato pure su un blog di prova vergine ma non funziona lo stesso!
    In che senso copiare il codice senza immagine!?

    RispondiElimina
    Risposte
    1. Per l'immagine di sfondo mi riferivo all'ultimo codice. Non mi so spiegare perché non ti funzioni. Nel test che ho fatto andava benissimo e anche nei commenti precedenti ci sono lettori che hanno installato questa personalizzazione
      @#

      Elimina
  4. Grazie ,ci sono riuscito...ma ho dovuto posizionare i codici in un altro punto,con vari tentativi ci sono riuscito comunque. Vorrei poter togliere quel bordino nero alle immagini che purtroppo esce!
    Segnalo questo link che magari può essere utile : http://technical-tejash.blogspot.it/2009/04/disable-copying-of-images-of-content-of.html
    Anche se non ci ho ancora smanettato su,ma mi sembra piuttosto buono!
    grazie ciao

    RispondiElimina
  5. Ciao, ottima spiegazione. Ma esiste un modo per spostare poco più in basso le immagini e soprattutto il bottone di chiusura? Ho inserito un menù in alto (per l'esattezza il menù "Responsive Menù per Blogger su due livelli anche per mobile") e in questo modo si taglia una parte dell'immagine superiore e soprattutto non è visibile il bottone. Grazie ^^

    RispondiElimina
    Risposte
    1. I selettori che trovai a suo tempo sono quelli elencati. Ora non so se siano sempre giusti perché la grafica è cambiata. Puoi provare a inserire righe di codice di questo genere
      margin-top:100px !important;
      sotto a
      .CSS_LIGHTBOX_BTN_CLOSE {
      per abbassare il bottone di chiusura. Non ho testato ma puoi tentare, la strada è questa
      @#

      Elimina
    2. Oh grazie mille per la risposta lampo! L'intero codice funziona ancora alla perfezione, proverò anche questa modifica che mi hai consigliato e ti farò sapere se va.

      Elimina
    3. Ok sei un genio! Funziona alla grande! Grazie infinite :D

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.