Nwlapcug.com


Come uso Lightbox to Open iFrame

Come uso Lightbox to Open iFrame


Lightbox aggiungere un "fattore wow" a molti siti commerciali High-end. Quando si fa clic il collegamento del sito Web, lo schermo si affievolisce, una scatola luminosa che sembra galleggiare sopra lo schermo e poi si riempie con la pagina Web. Aggiungi questo al tuo sito con qualche codice di base e pianificazione. Lightbox con frame inline (iframe) sono facili da acquisire come salvare una singola cartella sul server Web, quindi aggiungendo poche righe di codice a qualsiasi pagina nel tuo sito Web.

Istruzioni

1

Scaricare il file di GreyBox_v5_54 gratuito da orangoo.com/labs/GreyBox/. Decomprimere il file. Caricare la cartella "greybox" nel vostro principale (radice) directory web.

2

Incollare il codice nella sezione intestazione (tra < head > e < / head >) del codice HTML di una pagina web dove vuoi un lightbox a comparire, sostituendo "www.mysite.com" con il tuo sito Web:

< script type = "text/javascript" >

var GB_ROOT_DIR = &quot;http://www.mysite.com/greybox/&quot;;

< / script >
< script type = "text/javascript" src="greybox/AJS.js" >< / script >
< script type = "text/javascript" src="greybox/AJS_fx.js" >< / script >
< script type = "text/javascript" src="greybox/gb_scripts.js" >< / script >
< link href="greybox/gb_styles.css" rel = "stylesheet" type = "text/css" / >

3

Creare il collegamento per il tuo lightbox nel corpo del codice HTML della pagina dal passaggio 2 (tra < body > e < / body >) con il codice seguente, sostituendo "miosito" con il sito Web che si sceglie:

< a href = "http://www.mysite.com & quot; rel = "gb_page_center [400.500]" > Lightbox per visualizzare il sito web di mysite, 500 pixel di larghezza, 400 pixel di altezza, nel centro dello schermo. < /a >

Modificare i valori di altezza e larghezza per ottenere diverse dimensioni lightbox.

4

Testare il lightbox aprendo la pagina web in un browser e cliccando sul link. Una volta che funziona quando lo si desidera, è possibile aggiungere le Lightbox ad altre pagine.

Consigli & Avvertenze

  • GreyBox fornisce documentazione presso orangoo.com/labs/GreyBox/Documentation/. Leggere le sezioni di utilizzo normale e avanzata per una maggiore funzionalità ed esempi. Anche leggere le pagine di FAQ per le idee.