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?
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.
Nella head del sito creiamo il collegamento al nostro foglio di stile e a quello della libreria
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
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.
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:
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.
Non ti rimane che ricaricare la pagina e provare
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