Scuolissima.com - Logo

Come personalizzare lightbox immagini di Blogger

Il lightbox standard di Blogger serve per ingrandire le immagini selezionate oscurandone lo sfondo. L'alternative, come scritto in questo post sarebbero quella di non usarlo ed ottenere un risultato orribile e cioè che quando si va a cliccare un'immagine si viene reindirizzati in un'altra pagina oppure quella modificare il codice manualmente per ogni immagine.

Nell'altra post non ho parlato di come è possibile personalizzare il lightbox di Blogger e lo farò in questo post. 

Andate su Modello > Modifica HTML e cercate il tag ]]></b:skin> , prima di esso dovete inserire questo codice:
/* Scuolissima Blogger Lightbox
———————————————– */
/* Sfondo */
.CSS_LIGHTBOX_BG_MASK {
background-color: #ffffff !important;
background-image: url(image-url-address) !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}
/* Bordo */
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}
/* Bottone di chiusura */
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5QVqkcHVzk-SZN5_13KoqHbFbz2V4ExMNME3i0Dh8n-ypAncueSqMlTcK6AcwksvA6Cg1Dgs6CgeQGKCEYzE4RBT2jrUURRdKub2897R4b98AqjeYd49tBrfJC52c1D1KvtYUTfilw40/s1600/close.png) no-repeat !important;
width: 24px !important;
height: 24px !important;
}
/* Colore della barra */
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #eaeaea !important;
border-top:1px solid #d2d2d2!important;
}
/* Colore del testo */
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}
/* Numero delle immagini */
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}

Ecco il risultato finale di questo tutorial confrontato con il vecchio lightbox:



Anziché la versione scura, questa nuova è bianca e a mio parere migliore rispetto alla precedente perché per gli utenti è più facile intuire che l'immagine si chiude facendo click su una qualsiasi parte dello sfondo e, inoltre l'immagine ingrandita avrà anche i bordi arrotondati!

Ovviamente il codice è possibile personalizzarlo secondo i propri gusti o abbinamenti col tema in uso, vi basterà modificare il valore dei colori esadecimali del bordo, sfondo, scritte ecc.



🧞 Continua a leggere su Scuolissima.com
Cerca appunti o informazioni su uno specifico argomento. Il nostro genio li troverà per te.




© Scuolissima.com - appunti di scuola online! © 2012 - 2024, diritti riservati di Andrea Sapuppo
P. IVA 05219230876

Policy Privacy - Cambia Impostazioni Cookies