Una lightbox è un plugin jQuery utilizzato per sovrapporre le immagini o gallerie in una pagina Web, ed è noto anche come una finestra modale. script lightbox fatti Pre includono tipicamente un foglio di stile che definisce come apparirà il lightbox. Per impostazione predefinita, l'ID è programmato per apparire sopra tutti gli altri contenuti in una pagina Web, ma in alcuni casi, un elemento può rifiutare di cooperare. Questo è un problema comune con elementi flash o cursori di immagine. L'ordine in cui gli elementi sono stratificati viene controllato attraverso la "z-index" nel CSS foglio di stile.

istruzione

1 Assicurarsi che il plugin lightbox che avete scelto sia installato correttamente. Un collegamento al foglio di stile dovrebbe essere presente nella testa della pagina e simile a questa:

<Link rel = "stylesheet" type = "text / css" = mezzi = "screen" href "css / jquery.lightbox-0.4.css" />

2 Aprire il foglio di stile che contiene gli stili lightbox. Individuare il selettore principale che controlla la finestra ID e lo sfondo overlay. Nel caso del plugin jQuery originale ID, i selettori sono chiamati "# jquery-overlay" e "# jquery-ID." Un "z-index" dovrebbe esistere in entrambe le dichiarazioni. Ad esempio, la finestra jQuery ID è impostato su un valore di "100":

jquery-ID {

position: absolute;

top: 0;

left: 0;

width: 100%;

z-index: 100;

text-align: center;

line-height: 0;

}

3 Cambiare la "z-index" valore "8999" per la sovrapposizione e "9999" per la finestra. Questi numeri insolitamente alti dovrebbero garantire l'ID è posto al di sopra di tutti gli altri elementi.

4 Usare Opera o installare il Firebug add-on per Firefox dal add-on ufficiale directory. Pulsante destro del mouse l'elemento di sovrapposizione, e quindi scegliere "Inspect Element". Apparirà una finestra che mostra lo stile del codice HTML e CSS di competenza del elemento per aiutare a determinare quale file gli stili sono in così come quale classe viene utilizzato per controllare l'elemento. Se si lavora con un plugin per WordPress o CMS tema che include un lightbox, il CSS ID può essere incluso come parte del CSS del tema.

5 Scaricare e aprire il file che contiene lo stile CSS dell'elemento problema. Se questo elemento è parte di un plugin o un tema che non si desidera modificare direttamente, è possibile duplicare lo stile in foglio di stile del tuo sito web. Cambiare la "z-index" a un numero inferiore a 9998, e aggiungere "! Importante" per la linea per dire al browser di dare tale dichiarazione la precedenza. Per esempio:

.adbox {

z-index: 500 importante;

}

Consigli e avvertenze

• Sostituire gli elementi flash, come i cursori e blocchi di annunci, con jQuery o HTML5 controparti al fine di evitare sovrapposizioni o un comportamento strano. Utilizzando lo stesso tipo di script per tutti i tuoi elementi interattivi garantisce anche una migliore compatibilità e usabilità.
• Usare sempre i plugin jQuery con la stessa dipendenza versione o alcuna dipendenza al fine di evitare conflitti.