Popup di testo con WordPress e Fancybox

 
Usi WordPress e vuoi che, cliccando su un link testuale, si apra una finestra popup che contiene testo.
 
Puoi ottenere questo effetto con uno dei tanti plugin basati sulla libreria jQuery. Sto parlando di Lightbox, Colorbox, Fancybox, Thickbox e altri simili (dai un’occhiata alle caratteristiche e differenze se non li conosci).

Di sicuro ti sarà capitato di vedere questo effetto per le immagini (prova a cliccare sull’immagine qui sotto):

Ecco, puoi fare la stessa cosa con il testo al posto dell’immagine. Il procedimento è simile per tutti i plugin (anche se in realtà alcuni funzionano solo con le immagini).
Ti spiego come si fa con Fancybox, ad esempio. Per usarlo in WordPress devi innanzitutto scaricare il plugin specifico FancyBox for WordPress.
 
Quello che puoi ottenere lo vedi sul sito di Fancybox, alla fine della pagina, nella sezione Various example:
Inline – auto detect width / height
 
Si tratta di inserire dell’inline content.
Il testo che vuoi che appaia nella finestra popup deve essere già presente nella pagina, ma invisibile. E poi deve essere associato ad un identificatore. Puoi fare tutto con un div:

<div style="display:none" id="prova1">Questo è il testo
che apparirà nella finestra popup con effetto fancybox.
Puoi vederlo solo all'interno del popup
perché nella pagina è presente, ma invisibile.</div>

Adesso richiami quel div associandolo a un link di testo e specificando che dovrà aprirsi con fancybox:

<a class="fancybox" href="#prova1">Cliccando qui si aprirà
la finestra popup con effetto fancybox che contiene il testo</a>

E’ tutto.
 
Fancybox funziona con testo, immagini, video e altri tipi di contenuti. Sul sito trovi tutti gli esempi.

 

Effetto Lightbox apertura pagina o sito

 
Spesso capita, entrando in un sito, di vedere un’immagine di apertura (di solito una pubblicità) su sfondo opaco.
L’effetto è ottenuto tramite uno script JavaScript chiamato Lightbox che permette proprio di sovrapporre un’immagine alla pagina.
Lo stesso effetto viene usato anche per la visualizzazione di una galleria di foto.
 
Di seguito è riportato il codice html per ottenere un’immagine sovrapposta alla pagina, visibile all’apertura della pagina.
L’effetto sarà simile a questo.
 
Ecco la pagina di prova index.html:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
<html>
<head>
<title>Titolo</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen”>
</head>
<body>
<div>
<a id=”first” href=”images/prova.gif” rel=”lightbox[roadtrip]” ><img src=”images/prova.gif” alt=”” width=”1″ height=”1″ title=”prova”></a>
</div>
</body>
</html>

 
L’immagine sovrapposta è prova.gif che deve essere presente nella pagina, ma non visibile. Per questo le dimensioni sono impostate ad 1 pixel x 1 pixel.
 
Nell’ ARCHIVIO ZIP sono presenti tutti i file necessari al funzionamento.
 
FONTEhttp://home.comcast.net/~jscheuer1/side/lightbox2.04a/