Creare un PopUp in Drupal con jQuery e Lightbox

Argomenti: 

Vediamo come presentare un popup quando un utente visita una pagina del nostro sito sviluppato in Drupal (5.x/6.x/7.x).

Utilizzeremo jQuery e in particolar modo il plugin Lightbox. Innanzitutto procuriamoci i moduli necessari:

Attivate come al solito i due moduli nella pagina di gestione moduli del vostro sito.

Lightbox2 dovrà essere caricato in ogni pagina in cui vorrete far comparire il popup: per configurare questa impostazione andate nella pagina di amministrazione del modulo (admin/settings/lightbox2) e cambiate "Page specific lightbox2 settings" secondo le vostre esigenze. Per fare un test veloce potete caricarlo in ogni pagina selezionando la voce "Load on every page except the listed pages" e lasciando l'area di testo successiva vuota.

Attenzione:
esiste un bug nel codice javascript della versione attuale di Lighbox2 per Drupal 6 a causa del quale non è possibile utilizzare la tecnica qui descritta. Per poterlo fare è necessario applicare la seguente patch:

http://drupal.org/files/issues/lightbox2_6x_294361.patch

Create un nuovo contenuto ed inserite nel corpo della pagina il seguente codice (selezionate con Formato di input "Full HTML"):

<div id="lightboxAutoModal" style="display: none;"><p>Benvenuto in MGI di Ganovelli Maurizio!</p></div>

Il codice riportato carica all'interno di un popup il frammento di html che si trova dentro il div con id lightboxAutoModal, senza aprire altre finestre del browser (popup "inline"). Naturalmente lo potrete personalizzare come vorrete, inserendovi anche immagini e filmati flash.

Salvate la pagina e controllate il corretto funzionamento del popup. 

Se volete vedere l'effetto di questo tutorial online il link è il seguente: 

http://www.ganovelli.it/test-popup-jquery

Commenti

Stefano Capettini (non verificato)

Ciao, sono Stefano. Il tuo è il primo sito in due giorni che spiega una cosa e tutto va liscio, senza inconvenienti, succede esattamente quello che racconti. Quindi, già per questo, ti ringrazio!

Sono appunto due giorni che smanetto con Drupal e non riesco a fargli fare quello che voglio io. Uno dei miei problemi è implementare la jQuery Mobile, che ha una stupenda funzione di filtro delle righe di una tabella, ma non son riuscito a farla lavorare.

Un altra difficoltà che sto avendo è relativa a questo tutorial, in pratica vorrei far apparire la lightbox al click di un link e non al caricamento di una pagina, ma non so come fare.

Potresti aiutarmi? Grazie per la disponibilità!

Professore (non verificato)

Ciao Maurizio e complimenti per il tuo blog e per i tuoi articoli.
Volevo chiederti come fare a inserire il pop up solo nella home page.
Voglio che quando i visitatori vanno sul sito si apra il popup.

Grazie mille per l'aiuto.

Andrea (non verificato)

Ciao Maurizio e complimento per l'articolo, semplice ed efficace!
Una cortesia, come da te consigliato ho impostato l'apertura del pupup solo in homepage tramite blocco, e questo è visibile solo agli utenti non registrati.

E' possibile farlo apparire solo al primo accesso e poi basta? Ad esempio http://www.groupon.it , Altrimenti ogni volta che viene richiamata la homepage ricompare sempre e diventa fastidioso.

Grazie mille in anticipo per l'aiuto!

Ritratto di Maurizio Ganovelli

Maurizio Ganovelli

Ciao, l'idea potrebbe essere effettuare l'override del behavior che inizializza lightbox e che contestualmente scatena l'evento click per l'elemento con id lightboxAutoModal (dovrebbe essere Drupal.behaviors.initLightbox), andando a impostare un cookie per evitare la riapertura del popup alla visita successiva: non è proprio una soluzione pronta all'uso ma non me ne vengono in mente altre.
Per avere maggior controllo e una comoda interfaccia potresti utilizzare il modulo splashify indicato nel commento sopra http://www.ganovelli.it/comment/179#comment-179 con cui puoi settare il contenuto e il come/dove/quando mostrare il popup.

Crescenzo (non verificato)

Ciao Maurizio, scusami se uso questa sezione per farti una domanda:

Vorrei creare un blocco con, come contenuto, un video.

Per questo non penso di avere problemi, ma voglio crearlo come uno di quei video che compaiono appena si apre la home page di un sito e quando si clicca sul tasto chiudi restano visibili in un blocco posizionato in una regione del tema.

Poi nel momento in cui l'utente riclicca sul blocco si riapre in formato più grande.

Ho provato a fare varie ricerche prima di scriverti ma non ho trovato nulla.

C'è qualche modulo in particolare che tu sappia?

Grazie mille.

Complimenti, come già qualcuno ha scritto: tutto funzionante immediatamente. E non è poco per un drupalist :)
Una domanda.
Ho usato questa tua utilissima guida per creare dei popup ovelay. Tutto bene. Il solo problema serio è che questi popup non sono responsive e sugli smartphone sono una dannazione.
Come fare per rendere responsivo un popup overlay con lightbox2?
Prima di venire qui a disturbare ho provato una ricerca.
Ho trovato questo (dove indicano una soluzione sia per lightbox versione "full" che in versione lite)
https://www.drupal.org/node/1630630

Ho copiato e incollato nel style.css del tema ma non va :(
devo incollarlo da qualche altra parte o il codice è obsoleto?

grazie da ora per un eventuale aiuto :)

Ritratto di Fabrizio Procopio

Fabrizio Procopio

Per cominciare grazie, sia per la risposta e sia per aver accettato la mia richiesta di iscrizione al tuo sito

Effettivamente ora il popup è responsivo.
Il problema però è che il popup overlay va a tutto schermo in larghezza anche su PC.

Cioè manca il comportamento selettivo condizionale per il quale quando si è su PC arriva al massimo a una larghezza e un altezza fissata.
Mentre sui dispositivi mobili la larghezza scende a quella del device o magari all'80% (o altra percentuale).

In pratica mi pare che non rispetti la regola (faccio un esempio):
larghezza=600px o meno per schermi inferiori a 600px

Ritratto di Maurizio Ganovelli

Maurizio Ganovelli

I comportamenti per le varie device possono essere aggiustati tramite le media queries sempre da css, ad esempio:


@media (max-width: 600px) {
#imageContainer, #frameContainer, #modalContainer, #outerImageContainer, #imageDataContainer {
max-width: 80%;
}
}

ovviamente è solo un codice da adattare, niente di definitivo o testato a dovere!

Ritratto di Maurizio Ganovelli

Maurizio Ganovelli

Il codice che ho postato in pratica si traduce in "se la visualizzazione corrente è minore od uguale a 600px gli elementi che fanno da contenitori al modale devono occupare al più l'80% dello spazio disponibile". Puoi testare e aggiustare le classi e le dimensioni o aggiungere altri breakpoint (es max 1024, 1200, 1440 etc)