Una serie di jQuery lightbox plugin esistenti che consentono di visualizzare immagini e gallerie in una finestra in stile che si sovrappone il tuo sito Web. A seconda di come che è stato programmato il lightbox, essa può includere caratteristiche come le frecce di navigazione, descrizioni o titoli. Nascondendo uno qualsiasi di queste opzioni dipende anche il plugin lightbox e come è stato progettato. Nel caso di jQuery lightBox plugin originale, nascondendo il titolo dell'immagine o la didascalia può essere fatto attraverso il foglio di stile CSS o attraverso la modifica di file JavaScript.

Istruzioni

Modificare titolo usando i CSS

1

Aprire il foglio di stile CSS che è stato confezionato con il vostro plugin lightbox. Per jQuery lightBox, si aprirebbe il file "jquery.lightbox.css" si trova nella cartella "css".

2

Individuare il selettore relativi al tuo contenitore di titolo o didascalia di lightbox. Se non siete sicuri di quale selettore per scegliere, usare Opera o Firebug per Firefox e fare clic destro il testo che si desidera nascondere.

3

Scegliere "Ispeziona elemento" per visualizzare il frammento di codice correlato all'area di testo e annotare l'ID o la classe assegnata alla span o div. Ad esempio, jQuery lightBox utilizza "#lightbox-immagine-dettagli" e "#lightbox-immagine-dettagli-didascalia." Copiare questi stili principale-foglio di stile CSS del tuo sito Web.

4

Aggiungere una riga per ogni classe con un "display: none" regola. In questo modo nascondere efficacemente l'elemento nella maggior parte dei casi. Poiché CSS trucchi sono imprevedibili su tutti i browser, i risultati possono variare. Se nascondere l'elemento non funziona, aggiungere una riga per ogni classe con un valore negativo "text-indent". Questo trucco CSS spingerà qualsiasi testo nell'elemento molto di fuori dei bordi dell'elemento. Assicurarsi che ogni modifica apportata viene aggiunto con "! Importante"per dire al browser di utilizzare la tua dichiarazione di stile anziché predefinito dello script. Per esempio:

{#lightbox-immagine-dettagli di Lightbox-contenitore-immagine-dati

width: 70%;

float: left;

text-align: left;

display: none! important;

text-indent:-9999px! importante;

}

5

Cambiare il colore di sfondo o sfondo attributo della classe su "none" Se il vostro contenitore di titolo o descrizione di immagine è sovrapponendo le immagini. Per esempio:

Lightbox-contenitore-immagine-dati-box {

font: 10px Verdana, Helvetica, sans-serif;

background-color: none !important;

margin: 0 auto;

line-height: 1.4em;

overflow: auto;

width: 100%;

padding: 0 10px 0;

}

Consigli & Avvertenze

• Sostituire invece titoli sulle immagini con testo "alt". Questo è considerato una pratica migliore rispetto all'utilizzo di CSS Hack o alterare il tuo file JavaScript ed è meno probabile causare strani effetti visivi in browser meno recenti. Tenere sempre una copia di backup del tuo foglio di stile originale nel caso in cui si apporta una modifica che non è possibile invertire. Alcuni script lightbox contengono un attributo "titleShow" nello script di inizializzazione, o il file principale di JavaScript che può essere modificato semplicemente su "false". Questo non è tuttavia presente in tutti gli script e verrà sovrascritto se si aggiorna lo script, quindi creare stili personalizzati è spesso più infallibile.