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.

 

Popup di testo con WordPress e Fancybox ultima modifica: 2012-02-28T09:10:31+00:00 da Adriana
Condividi Share on FacebookTweet about this on TwitterShare on Google+Pin on PinterestEmail this to someone

15 thoughts on “Popup di testo con WordPress e Fancybox

  1. Luca says:

    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…

    • Adriana says:

      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.

  2. Stephane says:

    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.

  3. Giovanna says:

    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?

    • Adriana says:

      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>
      
      • Giovanna says:

        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?

  4. nicco says:

    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?

    • Adriana says:

      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.

  5. Tiziano says:

    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

  6. Gianni says:

    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.

  7. Davide says:

    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?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *