jQuery Magnific Popup è un plugin per jQuery con cui visualizzare immagini, gallerie fotografiche e finestre modali di vario tipo.

Magnific Popup è veloce, è adatto ai dispositivi di ogni tipo ed è rilasciato con licenza MIT.

Visualizzare singole immagini

Il primo esempio, come mostrato di seguito, consente di visualizzare singole immagini all’interno del plugin.

<!DOCTYPE HTML>
<html lang="it">
<head>
<meta charset="utf-8">
<title>jQuery - Magnific Popup  | Sintesi-Design.it</title>
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
</head>
<body class="mygallery">
    <h1>jQuery Magnific Popup</h1>
    <p>Lorem ipsum ...</p>
    <a href="images/1.png" class="foto"><img src="images/t1.png" width="100" height="75" ></a>
    <p>Aliquam pharetra ...</p>
    <a href="images/2.png"  class="foto"><img src="images/t2.png" width="100" height="75"></a> 
    <p>Aenean ac laoreet ...</p>
    <a href="images/3.png" class="foto"><img src="images/t3.png" width="100" height="75" ></a>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script>
      $(function() {
        $('.foto').magnificPopup({type:'image'});
      });
    </script>
</body>
</html>

Prima di tutto scaricare una copia di jQuery e di Magnific Popup e includerli alla fine del documento, subito prima del tag di chiusura dell’elemento body.

Nella cartella scaricata recuperare il file css del plugin (magnific-popup.css) e includerlo nell’intestazione del documento.

Inserire le miniature delle immagini da visualizzare nel plugin. Annidare ciascuna immagine da visualizzare all’interno di un elemento a che punti alla versione dell’immagine a dimensione reale. Assegnare a ciascun collegamento una classe, nell’esempio la classe .foto, per distinguerli dagli altri link del documento.

<a href="images/1.png" class="foto">
  <img src="images/t1.png" width="100" height="75" >
</a>

Aggiungere un altro elemento script in cui scrivere le istruzioni che selezionano le immagini a cui applicare il plugin, nell’esempio quelle contenute negli elementi a con classe .foto, e poi applicare il plugin con il metodo .magnificPopup().

Creare una galleria fotografica con jQuery Magnific Popup

Se si vuole visualizzare una serie di immagini in una galleria fotografica usando anche i normali controlli si spostamento è sufficiente modificare lo script jQuery che è stato inserito alla fine del documento.

<script>
$(function() {
  $('.foto').magnificPopup(
  	{ type:'image', 
	  gallery: {
  		enabled: true, // Abilità la galleria
		preload: [0,2], // Lazy loading: ritarda il caricamento delle immagini
  		navigateByImgClick: true,
        tPrev: 'Precedente', // Testo per il pulsante corrispondente
        tNext: 'Successiva',// Testo per il pulsante corrispondente
        } 
   }); 
}); 
</script>

Nell’esempio vengono mostrate anche alcune comuni opzioni facoltative. jQuery Magnific Popup dispone di moltissime opzioni che possono essere usate per personalizzare aspetto e comportamento del plugin. L’elenco completo  è disponibile nel sito ufficiale dello sviluppatore.