Una varietà di jQuery plugin lightbox esiste che consentono di visualizzare immagini e gallerie in una finestra in stile che si sovrappone il vostro sito web. A seconda del modo in cui l'ID è stato programmato, può includere caratteristiche come frecce di navigazione, descrizioni o titoli. Nascondere una qualsiasi di queste opzioni dipende anche il plugin lightbox e come è stato progettato. Nel caso del plugin originale jQuery LightBox, nascondendo il titolo dell'immagine o didascalia può essere fatto attraverso il CSS foglio di stile o attraverso la modifica del file JavaScript.

istruzione

Modificare titolo utilizzando i CSS

1 Aprire il CSS foglio di stile che è stato confezionato con il plug-ID. Per jQuery LightBox, si dovrebbe aprire il file "jquery.lightbox.css" che si trova nella cartella "css".

2 Individuare il selettore relative al vostro titolo lightbox o il contenitore didascalia. Se non si è sicuri di quale selettore per scegliere, usare Opera o Firebug per Firefox e fare clic con il testo che si desidera nascondere.

3 Scegliere "Inspect Element" per visualizzare il frammento di codice relativo alla zona di testo, e annotare l'ID o classe assegnata al frammento o un div. Ad esempio, jQuery LightBox usa "# lightbox-image-particolari" e "# lightbox-image-dettagli-caption". Copiare questi stili in principale CSS foglio di stile del tuo sito web.

4 Aggiungere una linea per ogni classe con un "display: none" regola. Questo nasconderà efficacemente l'elemento nella maggioranza dei casi. Dal momento che i trucchi CSS sono imprevedibili in tutti i browser, i risultati possono variare. Se si nasconde l'elemento non funziona, aggiungere una riga per ogni classe con un valore negativo "text-rientro". Questo trucco CSS spingerà qualsiasi testo nell'elemento molto al di fuori dei confini degli elementi. Assicurarsi che ogni modifica apportata viene aggiunto con "Importante" per dire al browser di utilizzare il dichiarazione di stile al posto di inadempienza dello script. Per esempio:

ID-contenitore-image-dati # lightbox-image-dettagli {

width: 70%;

float: left;

text-align: left;

! Display: none importante;

text-trattino: -9999px importante;!

}

5 Cambiare il colore di sfondo o attributo background della classe a "nessuno" se il titolo o la descrizione immagine contenitore viene sovrapponendo le immagini. Per esempio:

ID-contenitore-image-dati-box {

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

background-color: nessuna importanza;

margin: 0 auto;

line-height: 1.4em;

overflow: auto;

width: 100%;

padding: 0 10px 0;

}

Consigli e avvertenze

• Sostituire i titoli sulle immagini con il testo "alt", invece. Questo è considerato una pratica meglio che usare hack CSS o modificare il file JavaScript ed è meno probabilità di causare strani effetti visivi nei browser più vecchi. Tenere sempre una copia di backup del vostro stile-foglio originale nel caso in cui si apporta una modifica non si può invertire. Alcuni script lightbox contengono un attributo "titleShow" nello script di inizializzazione, o il file principale JavaScript che può semplicemente essere cambiato in "falso". Questo non è presente in tutti gli script comunque, e sarà sovrascritto se si aggiorna lo script, quindi la creazione di stili personalizzati è spesso più infallibile.