Creare una gallery responsive con Magnific Popup

4 Settembre 2018 Simone Baldassin web

Qualche tempo fa ti ho insegnato come implementare nel tuo sito web un plug-in jQuery per creare delle gallery responsive in pochissimi e semplici passaggi; non te lo ricordi? Nessun problema, ti basta cliccare qui

In questo articolo ti propongo una delle tante alternative esistenti tra le più utilizzate: Magnific Popup di Dimitry Semenov

Questa libreria jQuery, rilasciata su licenza MIT, è adatta per la visualizzazione da qualsiasi dispositivo e permette di visualizzare singole immagini, video, gallerie, form popup e finestre modal. Nel  sito ufficiale puoi trovare moltissimi esempi di utilizzo.

Creiamo subito un nuovo esercizio, con un file index.html, una cartella css con un file style.css e una cartella img dove puoi già inserire 3 immagini in formato jpg con dimensioni a piacere.

Abbiamo ora bisogno di scaricare la libreria, per farlo clicchiamo sul link ufficiale di Github ed effettuiamo il download. Una volta decompresso il file zip tutto quello che ti serve sono la cartella dist e il suo contenuto; copiala e incollala nella root principale del tuo esercizio come da figura.

popup

Nella head del sito creiamo il collegamento al nostro foglio di stile e a quello della libreria

popup

Mentre prima della chiusura del body andiamo a inserire il link CDN alle api di Google con l’ultima versione di jQuery e il collegamento allo script js della libreria

popup

A questo punto non ti rimane che inserire le immagini e renderle linkabili ricordandoti che tutte le classi che vedi applicate nell’esempio sono presenti nel mio foglio di stile e, a meno che tu non stia utilizzando il mio css starter, la formattazione è a tuo piacere.

popup

L’unica classe “obbligatoria” è quella definita al marcatore a ovvero image-popup perché è quella che ci permette di assegnare lo script a quel determinato link. Il risultato attuale che vedrai a browser è il seguente:

popup

Andiamo ora a definire lo script vero e proprio basandoci sugli esempi forniti nel sito ufficiale. Per questo esempio ho deciso di attivare l’opzione gallery, ovvero potrai scorrere con delle frecce direzionali le varie immagini che compongono la galleria; se non vuoi dare questa possibilità ti basta non inserire la funzionalità o definirla false.

L’opzione zoom ti permette invece di dare un pò di movimento in apertura e chiusura per rendere più accattivante l’effetto.

popup

Non ti rimane che ricaricare la pagina e provare

popup

Come già detto in apertura, quella vista è solamente una delle possibilità messe a disposizione da questa famosissima libreria, per tutte le altre ti rimando alla documentazione ufficiale dove potrai trovare esempi semplici da applicare velocemente ai tuoi progetti.

Ancora nessun commento

Lascia un commento

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Clicca qui e Approfitta del Credito d’Imposta Formazione 4.0