Un paio di trucchi per Magnific-Popup, una magnifica lightbox, ovviamente, per jQuery
Uno strumento che non può mancare in qualsiasi sito web è certamente la lightbox, utile per mostrare in modo elegante non solo le foto e i video, ma qualsiasi tipo di contenuto, come un'intera pagina html.
Inoltre ormai sono anche responsive, quindi fanno bene il loro lavoro sugli smartphone, permettendo ad esempio di mostrare gallerie di foto rimanendo nella pagina principale.
Magnific-Popup è una jQuery lightbox, che ha come punti di forza le performance (solo JS e CSS, niente immagini), la versatilità , l'eleganza, e l'alto grado di adattabilità a tutti i tipi di schermi.
Visitando il sito ufficiale si nota subito la molteplicità dei modi in cui possiamo usarla: adatta per foto, video (ottimizzata per YouTube e Vimeo ma supporta qualsiasi tipo di player), codice HTML in linea, contenuto Ajax, iFrame...
Download e configurazione
Per prima cosa dobbiamo scricare i file necessari, consiglio di cliccare su Build Tool nel menu della Home page del sito ufficiale, quindi scaricare il file CSS (o il SASS per chi lo preferisce), selezionare le varie funzionalità che ci servono e cliccare Generate build. Salviamo tutto il contenuto generato in un file js.
Mettiamo tutti i file a disposizione della nostra pagina HTML e iniziamo a scrivere i tag necessari nell'HEAD:
<link rel="stylesheet" href="jquery/magnific-popup.css" type="text/css" charset="utf-8"> <script src="jquery/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="jquery/magnific-popup.js" type="text/javascript" charset="utf-8"></script>
Notate che nel mio caso ho posizionato i file nella cartella jquery.
Fondamentale è richiamare prima il file js di jQuery poiché i caricamenti degli script sono sincroni.
Altro codice fondamentale è quello per inizializzare l'oggetto
<script type="text/javascript"> $(document).ready(function(){ $('.mfp-image').magnificPopup({type:'image'}); $('.photogallery').each(function() { $(this).magnificPopup({ delegate: 'a' ,type: 'image' ,gallery: {enabled:true} ,preload: [2,2] }); }); $('.mfp-video').magnificPopup({type:'iframe'}); $('.mfp-iframe').magnificPopup({type:'iframe'}); }); </script>
In genere viene messo in fondo alla pagina, ma, grazie all'evento ready è possibile posizionarlo ovunque.
Questa è la mia configurazione preferita, molto semplice ed efficace.
Vediamo quindi qualche esempio di elementi HTML per metterla in funzione.
Iniziamo con l'ingrandimento di singole foto
<a href="foto/mia-foto.jpg" class="mfp-image">Clicca per mostrare la foto</a> <a href="foto/altra-foto.jpg" class="mfp-image"><img src="foto/altra-foto.jpg" style="width:50px" alt="Clicca per ingrandire"></a>
Ora se avessimo qualche foto da assegnare ad una galleria:
<ul class="photogallery"> <li><a href="galleria/foto01.jpg">foto 01</a></li> <li><a href="galleria/foto02.jpg">foto 02</a></li> <li><a href="galleria/foto03.jpg">foto 03</a></li> <li><a href="galleria/foto04.jpg">foto 04</a></li> <li><a href="galleria/foto05.jpg">foto 05</a></li> </ul>
Tutte le foto nel blocco fanno parte della stessa galleria, quando clicchiamo su una si apre la lightbox e possiamo andare avanti o indietro. Inoltre, se osserviamo la nostra configurazione, abbiamo anche attivato la funzione di preload, in particolare vengono precaricate le 2 foto precedenti e le 2 successive a quella che sto visualizzando. Ecco un test
Andiamo avanti con un video
<a href="https://www.youtube.com/watch?v=w1f6o1HQBvg" class="mfp-video">Guarda il video</a>
Magnific-Popup riconosce il link di YouTube e mostra immediatamente il player in embed, niente di piú facile, testiamolo subito: Guarda il video
Ma arriviamo alla parte piú interessante
Gli iFrame sono una modalità che utilizzo molto spesso con le lightbox, il funzionamento è banale
<a href="altra-pagina.html" class="mfp-iframe">Mostra altra pagina</a>
La pagina html specificata nel link verrà mostrata allo stesso modo.
Qui c'è il primo problema da affrontare: a differenza dei contenuti in linea (invito a vedere la documentazione, non sto qui a spiegare tutte le modalità ) dove posso specificare le dimensioni del blocco a cui Magnific-Popup si adeguerà , per gli iFrame non posso impostare le dimensioni attraverso la configurazione o gli attributi dei vari tag usati. Per ottenere le dimensioni desiderate devo andare a modificare a mano gli stili.
Ridimensionare la lightbox
Magnific-Popup genera vari layer nei quali inserisce le foto, video o iframe da visualizzare. Quello su cui bisogna agire ha la classe mfp-content e dobbiamo modificare height e max-width.
Possiamo farlo con un semplice comando jQuery:
<script type="text/javascript"> $('.mfp-content').css({maxWidth:'700px',height:'180px'}); </script>
Il comando può essere eseguito subito dopo l'apertura della lightbox, per questo io preferisco metterlo nella stessa pagina che viene mostrata al suo interno (nel nostro esempio il file altra-pagina.html).
Questo mi offre 2 vantaggi: il primo è che il comando verrà eseguito senza dover impostare altri eventi, inoltre in questo modo posso impostare le dimensioni in base alla pagina, e se dovessi navigare sempre all'interno della lightbox le dimensioni cambierebbero al cambio di ogni pagina.
Per fare questo il comando va cosà modificato
<script type="text/javascript"> if(parent && parent.$('.mfp-content').length) { parent.$('.mfp-content').css({maxWidth:'700px',height:'180px'}); } </script>
La lightbox si trova infatti nella finestra parent rispetto alla pagina visualizzata nell'iFrame.
Possiamo applicare anche un'elegante animazione:
<script type="text/javascript"> if(parent && parent.$('.mfp-content').length) { parent.$('.mfp-content').animate({maxWidth:'700px',height:'300px'}, 500); } </script>
Molto utile quando si naviga nell'iFrame: al cambio di pagina la lightbox si ridimensiona con l'animazione che, nel nostro caso, dura mezzo secondo.
Se vogliamo essere pignoli sarebbe meglio tenere nascosto il contenuto della nostra pagina finché l'animazione non è finita:
<script type="text/javascript"> if(parent && parent.$('.mfp-content').length) { parent.$('.mfp-content').animate({maxWidth:'700px',height:'180px'}, 500, function() { document.getElementById('content-wrapper').style.visibility = 'visible'; }); } else { document.getElementById('content-wrapper').style.visibility = 'visible'; } </script>
Dove content-wrapper è l'ID del blocco che dovrà racchiudere tutto il contenuto di altra-pagina.html in questo modo:
<div id="content-wrapper" style="visibility:hidden"> contenuto </div>
Vediamo subito il risulato finale:
Apri la pagina!
Un'ultima cosa per cui preferisco Magnific-Popup a molte altre lightbox: si presta molto bene allo zoom sugli smartphone.
Quando si apre una foto su uno smartphone spesso si ha bisogno di vederne meglio i dettagli, per fare questo bisogna utilizzare lo zoom del dispositivo.
Per permettere che lo zoom funzioni su una foto già ingrandita a tutto schermo nella lightbox bisogna assicurarsi che il tag per la configurazione del viewport sia esente dal max-scale. Ad esempio io uso questo:
<meta name="viewport" content="width=device-width, initial-scale=1" />
se aggiungessimo max-scale=1 lo zoom non funzionerebbe.
Con questo è tutto, buona lightbox a tutti!