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.

 

15 commenti

  1. Ciao,
    ho recentemente scaricato l’ultima versione 3.0.1 di Fancybox e decompressa nella cartella plugIn di WordPress versione 3.1.1.
    Premetto che non ho mai utilizzato questo plugin prima per cui non posso dire che prima funzionava e ora non più…
    Quello che ho riscontrato è che il plugIn non funziona, almeno nel mio caso.
    Girovagando su internet si parla di incompatibilità ma non ho capito bene fra cosa… tu ne sai nulla ?
    Mi dispiacerebbe non riuscire farlo funzionare, anche perchè a mio avviso, questo è fra i migliori in circolazione…
    Ogni aiuto è ben gradito…

    "Mi piace"

    1. Non ne ho la certezza, ma può essere che Fancybox non funzioni con WordPress o che sia in conflitto con altri plugin installati. Ti posso confermare che con WordPress funzionano Lightbox (per le immagini) e Thickbox (sia immagini sia testo). Rispetto a Fancybox cambiano solo un po’ nell’aspetto.

      "Mi piace"

  2. Ciao Grazie alla tua guida ho trovato cio che cercavo ma il problema è che non mi fa vedere il contenuto del box.
    Cioé si apre ma non fa vedere il testo.

    "Mi piace"

  3. ciao admin ho letto che con thickbox hai risolto un problema che da giorni ormai mi sta facendo uscire pazza mica spiegheresti come hai fatto perpiacere? magari con un esempio su una determinata parola presente in una pagina es: gruppo?

    "Mi piace"

    1. Ciao Giovanna, è spiegato tutto nell’articolo. Nel caso specifico di Thickbox ecco un esempio (usando la parola “gruppo” come link che fa aprire il popup thickbok):

      <a class="thickbox" href="#TB_inline?height=300&width=400&inlineId=etichetta-gruppo" rel="nofollow">GRUPPO</a>
      
      <div style="display: none;">
      <div id="etichetta-gruppo">
      testo che deve apparire nella finestra popup thickbox
      </div>
      </div>
      

      "Mi piace"

      1. Ciao grazie millle sei stata super gentile, volevo chiederti ho messo come hai detto tu e sulla parola se clikko mi esce la schermatina del popup ma vuoto devo aggiungere altro in qualche altra pagina perpiacere?

        "Mi piace"

  4. se io provo a mettere un link ad un immagine trovata su web mi si apre una pagina bianca con quell’immagine in alto a sinistra, ma della fancybox non c’e’ traccia. cosa sto sbagliando?

    "Mi piace"

    1. Nel post ti spiego come far apparire del testo o un’immagine in una fancybox, ma sia il testo che l’immagine devono far parte dell’articolo (wordpress).
      Per contenuti esterni prova a dare un’occhiata agli altri esempi.

      "Mi piace"

  5. Ciao
    come faccio e cosa uso per avere questo:
    ho le icone delle immagini, clicco su una e mi si apre l’immagine con le sue descrizioni ecc… mi serve per descrivere dei prodotti
    Ho provato Fancybox ma vedo solo immagine e titolo, la descrizione no

    Grazie

    "Mi piace"

  6. Ciao Adriana, non so se puoi aiutarmi, ma sto cercando un plug in che funzioni in questo modo: nel momento in cui il visitatore del mio sito clicca su un link per scaricare dei pdf , vorrei che si aprisse un pop up che gli dice di registrarsi sul mio sito prima del download. Tu puoi aiutarmi? conosci questo plug in ? Grazie infinite per la collaborazione. Ciao Gianni.

    "Mi piace"

  7. Ho letto la conversazione, grazie.

    Perñ, io avrei bisogno di un plugin popup che mi consenta di aprire una playlist, richiamata con comandi inline.

    Hai qualche idea?

    "Mi piace"

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

Crea il tuo sito web con WordPress.com
Crea il tuo sito
%d blogger hanno fatto clic su Mi Piace per questo: