Una lightbox è un plugin per jQuery usato per sovrapporre immagini o gallerie su una pagina Web, ed è anche conosciuto come una finestra modale. Gli script pre-fatte lightbox includono in genere un foglio di stile che definisce come apparirà il lightbox. Per impostazione predefinita, il lightbox è programmato per apparire sopra ogni altro contenuto in una pagina Web, ma in alcuni casi, un elemento può rifiutarsi di cooperare. Questo è un problema comune con elementi flash o slider di immagini. L'ordine in cui gli elementi sono messi a strati è controllata tramite la proprietà "z-index" nel foglio di stile CSS.

Istruzioni

1

Assicurarsi che il plugin lightbox che avete scelto sia installato correttamente. Un link al foglio di stile deve essere presente nella sezione head della tua pagina e guardare qualcosa di simile:

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

2

Aprire il foglio di stile contenente gli stili di lightbox. Individuare il selettore principale che controlla la finestra lightbox e lo sfondo sovrapposizione. Nel caso di jQuery lightBox plugin originale, i selettori sono chiamati "#jquery-overlay" e "#jquery-lightbox." Una proprietà "z-index" dovrebbe esistere in entrambe le dichiarazioni. Ad esempio, la finestra di lightBox jQuery è impostata su un valore di "100":

jQuery lightbox {

position: absolute;

top: 0;

left: 0;

width: 100%;

z-index: 100;

text-align: center;

line-height: 0;

}

3

Modificare il valore di "z-index" a "8999" per la sovrapposizione e "9999" per la finestra. Questi numeri insolitamente elevati dovrebbero garantire che la lightbox è posto soprattutto altri elementi.

4

Opera di utilizzare o installare il componente aggiuntivo Firebug per Firefox dalla directory Add-on ufficiale. Pulsante destro del mouse l'elemento sovrapposto e quindi scegliere "Inspect elements." Apparirà una finestra che vi mostra il codice HTML e CSS stile relative all'elemento per aiutare a determinare quale file gli stili sono in così come la classe a cui viene utilizzato per controllare l'elemento. Se si lavora con un plugin di WordPress o CMS tema che include un lightbox, lightbox CSS può essere incluso come parte del CSS del tema.

5

Scaricare e aprire il file contenente CSS stile dell'elemento problema. Se questo elemento è parte di un plugin o un tema che non si desidera modificare direttamente, si può duplicare lo stile nel foglio di stile del tuo sito Web. Modificare la proprietà "z-index" in un numero inferiore di 9998 e aggiungere "! importante" per la linea per dire al browser di dare questa dichiarazione la precedenza. Per esempio:

.adBOX () {

z-indice: 500! importante;

}

Consigli & Avvertenze

• Sostituire gli elementi flash, come cursori e blocchi di annunci, con jQuery o omologhi di HTML5 per evitare sovrapposizione o strano comportamento. Utilizzando lo stesso tipo di script per tutti gli elementi interattivi anche garantisce la migliore compatibilità e fruibilità.
• Sempre utilizzare jQuery plugin con la stessa dipendenza di versione o alcuna dipendenza al fine di evitare conflitti.