Pubblicato il 14/10/11e aggiornato il

Come personalizzare il Lightbox nativo di Blogger.

Da ieri è tornato nuovamente su tutti i siti della piattaforma Blogger il Lightbox nativo. Si tratta di cliccare su una qualsiasi immagine priva di collegamento per visualizzarla a grandezza naturale in uno sfondo scuro. Ricordo che questo effetto può essere disabilitato andando su Impostazioni > Post e commenti > Open Images in Lightbox e selezionando il NO.

Di default in tutti i blog che hanno lasciato questo effetto, vengono mostrati gli stessi stili per quanto riguarda il colore di sfondo, l'opacità, le icone, la barra della galleria ecc. Attraverso opportuni CSS si può personalizzare il Lightbox per renderlo più adatto ai colori e allo stile del nostro blog.

    Qui di seguito posto uno screenshot in cui vengono mostrati gli elementi che si possono modificare

effetto-lightbox-blogger

Si tratta del colore dello sfondo, del colore del link dell'immagine, del colore del numero delle immagini, dell'icona di chiusura, del colore della barra della galleria e dello stile del bordo e della ombreggiatura. Questa ultima personalizzazione non sarà correttamente visibile con Internet Explorer.

Si va su Modello > Modifica HTML, si cerca la riga ]]></b:skin> e, subito sopra, si incolla il seguente CSS 

/* Blogger Lightbox Personalizzato */
/* Colore di background dell'effetto */
.CSS_LIGHTBOX_BG_MASK {
background-color: #BB290B !important;
opacity: 0.8 !important;
filter: alpha(opacity=80) !important;
}
/* Stile delle immagini con arrotondamento e ombreggiatura */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #FFFFFF !important;
-webkit-border-radius: 12px;
-moz-border-radius:12px;
border-radius: 12px;
-webkit-box-shadow: 12px 12px 6px #000000;
-moz-box-shadow: 12px 12px 6px #000000;
box-shadow: 12px 12px 6px #000000;
}
/* Icona per chiudere il LIghtbox */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(https://lh4.googleusercontent.com/-KfzvFrwgjmc/Tpgzm5NkahI/AAAAAAAAUqs/fToV6r3Lqic/s24/blackclose.png) no-repeat !important;
width: 24px !important;
height:24px !important;
}
/* Colore di sfondo della barra delle miniature */
.CSS_LIGHTBOX_FILMSTRIP {background-color: #191919 !important;}
/* Colore del link della immagine */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {color: #191919 !important;}
/* Colore del numero delle immagini */
.CSS_LIGHTBOX_INDEX_INFO {color: #191919 !important;}

Si salva il modello. Attraverso il tag !important; si ottiene una priorità dei parametri di questo codice rispetto a quelli nativi di Blogger. I commenti colorati di viola mostrano a cosa si riferiscono i blocchi di codice sottostanti. Mi soffermo solo su quelli più importanti:

  1. background-color: #BB290B !important; rappresenta il colore dello sfondo in cui si apre la finestra del Lightbox
  2. opacity: 0.8 !important; filter: alpha(opacity=80) determina la opacità dello sfondo (1.0 e 100 significheranno trasparenza zero)
  3. background: url(URL IMMAGINE) no-repeat !important; è l'icona di chiusura del Lightbox che può essere caricata su Picasa
  4. #000000 è il colore dell'ombreggiatura mentre box-shadow: 12px 12px 6px rappresentano l'arrotondamento dei bordi che le vecchie versioni di IE non sono in grado di mostrare.

Mi ricordo infine che in un commento mi fu chiesto come fare a eliminare il link della immagine. Basterà modificare la riga relativa in questo modo

/* Colore del link della immagine */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {display:none;}

Concludo ricordando che ciascun CSS può essere ulteriormente integrato inserendo altri parametri come per esempio le dimensioni della barra delle miniature o altri valori ma non ne ho testato il funzionamento. Ho però pubblicato una





26 commenti :

  1. salve ernesto, vorrei sapere se è possibile inserire un CSS per eliminare la galleria di immagini in basso o per ridurre le sue dimensioni...se si, potresti indicarmi un esempio di codice? grazie!

    RispondiElimina
  2. ho provato a mettere

    .CSS_LIGHTBOX_FILMSTRIP {display:none;}

    e mi scompaiono le miniature, ma rimane comunque l'ingombro del "filmstrip" e quindi le immagini si aprono con dimensioni ridotte...qualche consiglio?

    RispondiElimina
  3. @Mario Alan
    Il metodo dovrebbe essere quello ... Se non funziona non ti saprei dire perché :(

    RispondiElimina
  4. Grazie!! Sei veramente un mito!!! =D
    Esiste il Nobel per l'informatica?

    RispondiElimina
  5. @MariaFelicia99
    Scherzi! Più che in Nobel per l'informatica io dovrei andare al Cepu :D

    RispondiElimina
  6. segnalo da apprezzatore del lightbox googleiano che se carichi una foto e la modifichi con il potente tool della casa, quel piknik che .. schiaccia le noccioline .. poi pettina le bambole .. e finalmente modifica la foto .. che poi si apre in una scheda a parte esulando dal
    lightbox ..
    misteri della fede
    tanto vi dovevo
    gradite distinti saluti

    RispondiElimina
  7. Ciao! Riguardo la risposta al mio messaggio ti dico che ho provato a togliere la personalizzazione, ho controllato il codice, ho provato anche a selezionare "No" sull'opzione del disabilitamento dell'effetto (poi ovviamente rimettendo su "sì") ma il LightBox non va.
    Se io clicco su un'immagine priva di collegamento non succede esattamente niente.
    E' un peccato perchè questo effetto mi piaceva molto...=(

    RispondiElimina
  8. @MariaFelicia99
    Non so che dirti, può darsi che si sistemi tutto al più presto ;)

    RispondiElimina
  9. ciao Ernesto,
    ma come mai sul mio blog http://www.blueswriters.com/ non si apre la visualizzazione? inoltre se la levo non si toglie.
    quasi quasi darei anche i dati di accesso a te per dare un occhiata al css....
    grazie!

    RispondiElimina
  10. @francesco
    Da qualche giorno hanno tolto il lightbox nativo senza avvertire da molti blog. Anche in questo se clicchi su una immagine non si apre nulla.

    RispondiElimina
  11. Sei un grande! Provo subito!! Grazie!!

    RispondiElimina
  12. Ho un dubbio però. Se io volessi la nuova versione di lightbox 2 devo disabilitare quella nativa di blogger e poi seguire queste tue istruzioni?

    RispondiElimina
  13. @Kokeshimeie
    Sì, è esattamente così altrimenti ti si apriranno due finestre

    RispondiElimina
  14. Non funziona! Sigh! :(
    Se disabilito il lightbox nativo di blogger non si apre nessuna finestra... e se lo abilito mi apre la versione nativa (non due finestre) nonostante io abbia caricato prima di "/head" il tuo codice per lightbox 2.
    Perché?

    RispondiElimina
  15. @ Kokeshimeie
    Che vuoi che ti dica, sono i misteri di Blogger :D

    RispondiElimina
  16. Noooo!! Questa risposta mi uccide!!! :'(
    Potrebbe essere il mio template a entrare in conflitto con lightbox 2?
    Questo è il mio blog: Beauty & Vanity.
    Grazie mille!

    RispondiElimina
  17. @Kokeshimeie
    Per prima cosa ti chiedo di non inserire link attivi nei commenti. Visto che non posso controllarli tutti e quando ne vedo uno sono costretto a cancellare il commento.
    La risposta alla tua domanda purtroppo è che lo script del Lightbox non funziona. Potresti provare a caricare gli script e il CSS su DropBox invece che su Google Sites e ottenere il link diretto. Qualche volta si risolve, specie se si ha un dominio personalizzato ma mi pare che non sia il tuo caso. Parlo di questi tre
    https://sites.google.com/site/scriptperilblog/lightbox/lightbox.css
    https://sites.google.com/site/scriptperilblog/lightbox/prototype.js
    https://sites.google.com/site/scriptperilblog/lightbox/lightbox.j
    Se non sai cosa è DropBox leggiti questo post
    http://www.ideepercomputeredinternet.com/2010/11/dropbox-per-condividere-file-con-piu.html

    RispondiElimina
  18. Scusa Ernesto, non volevo violare le regole! :S
    Ti ringrazio per il tempo che mi hai dedicato. Sei stato molto gentile.
    Proverò le soluzioni che mi hai proposto.
    A presto! :)

    RispondiElimina
  19. @Kokeshimeie
    Non è che è una regola. E' una gentilezza che chiedo ai commentatori ;)

    RispondiElimina
  20. ...veramente grande!!!

    Mi chiedo se è possibile inserire un stringa in modo che al passaggio del mouse sopra la foto faccia apparire il suo titolo.
    Mi puoi aiutare?
    Grazie!!!

    Ciao
    CSJ

    RispondiElimina
    Risposte
    1. @CSJ
      Così di primo acchito non ti so rispondere. Bisognerebbe analizzare il codice con Firebug per vedere se sia possibile inserire il tag title

      Elimina
  21. Piccolo problema inerente al lightbox.
    Quando si fa play su un video/canzone incorporati da youtube il video si interrompe ed azzera una volta aperta un'immagine nello stesso post.
    E' una cosa che si può risolvere in qualche modo?
    L'idea era quella di inserire una canzone come incorporamento da YouTube, cliccare play ed ascoltarla sfogliando le immagini a seguire con il light box.

    Buona notte

    RispondiElimina
    Risposte
    1. @TobiaAlberti
      Probabilmente ti riferisci al Lightbox installato e non nativo di Blogger. No, non credo si possa fare qualcosa anche se non sapevo che sul Lightobox si potevano inserire video.

      Elimina
    2. No, credo sia il lightbox nativo.
      Il video non è nel light box.
      Nel post c'è un'intro scritta, poi il video incorporato da youtube per ascoltare una canzone e poi una fotografia.
      Aprendo la fotografia il video si interrompe.
      Il post è questo: http://tobiaalberti.blogspot.it/2012/05/in-cosa-credi-fotografia-in-musica.html
      (Perchè se fosse il lightbox nativo sarebbe possibile?)
      Grazie e buona giornata!

      Elimina
    3. @TobiaAlberti
      Non credo dipenda dal Lightbox, forse dall'innaturale ridimensionamento del player di Youtube

      Elimina
    4. Ho provato anche con il player normale (mantenendo le proporzione) e accade lo stesso..
      A questo punto mi rassegno, se non ci sono altre possibilità..

      Grazie e buona giornata!

      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.