Share
Recentemente mi sono imbattuto in una libreria JavaScript chiamata PhotoSwipe e sono davvero impressionato. È una biblioteca brillante che sovrascrive un'immagine o un gruppo di immagini sulla tua pagina corrente, un effetto popolarmente conosciuto come lightbox. PhotoSwipe è attualmente sviluppato da Dmitry Semenov, che lo ha ricostruito l'anno scorso quando ha assunto il progetto. I miglioramenti includono:
L'unico lato negativo è che PhotoSwipe non finirà mai. Come afferma lo sviluppatore:
"PhotoSwipe è reso semplice e veloce per gli utenti finali, non per gli sviluppatori. Non è un semplice plug-in jQuery, è richiesta almeno una conoscenza di base di JavaScript per l'installazione.
Ma può essere utilizzato in combinazione con altre librerie. In questo tutorial, vedremo come usare PhotoSwipe con jQuery. Renderemo l'intero processo facilmente comprensibile, anche se non sei esperto in puro JavaScript.
Iniziamo.
Inizieremo con:
Accentsconagua
photoswipe.min.js, photoswipe-ui-default.min.js (il codice che costruisce l'interfaccia utente PhotoSwipe), default-skin.css, default-skin.png, default-skin.svg, epreloader.gif.La struttura HTML è la parte più essenziale dal momento che alla fine guiderà come scrivere il codice JavaScript. Qui assumeremo che abbiamo un paio di immagini, come segue:
A parte la classe e gli attributi dello schema (che aiuteranno con la SEO), abbiamo anche aggiunto un dati-* attributo nel tag di ancoraggio che avvolge l'immagine. Questo memorizza l'intera dimensione (larghezza x altezza) dell'immagine.
Ora aggiungiamo il markup che PhotoSwipe utilizzerà per sovrapporre le immagini complete. Aggiungi questo appena prima del tag body di chiusura,
Siamo tutti impostati con l'HTML, quindi ora possiamo procedere con il JavaScript. Come accennato useremo jQuery.
Le nostre immagini sono raggruppate all'interno di a div con il immagine classe. Potrebbero esserci molti più gruppi di immagini all'interno della pagina, quindi eseguiamo un ciclo di ciascuno di essi .immagine elemento.
$ ('. picture'). each (function () ); PhotoSwipe ci richiede di fornire l'intera fonte di immagini insieme alle sue dimensioni. Per fare ciò, creiamo una funzione che eseguirà il looping del tag di ancoraggio per recuperare questi dettagli, come segue:
$ ('. picture'). each (function () var $ pic = $ (this), getItems = function () var items = []; $ pic.find ('a'). each (function () var $ href = $ (this) .attr ('href'), $ size = $ (this) .data ('size'). split ('x'), $ width = $ size [0], $ height = $ size [1]; var item = src: $ href, w: $ width, h: $ height items.push (elemento);); restituisce elementi; var items = getItems ();); Rompiamo il codice in basso in più parti:
articoli = []..ogni() metodo.$ href = $ (this) .attr ('href') ottiene il valore nel href attributo, memorizzando il percorso dell'immagine completa.$ size = $ (this) .data ('size'). split ('x') otterrà il valore del Dati-size attributo tramite jQuery .dati() metodo. Quindi usiamo il Diviso()metodo per separare il valore.$ larghezza = $ dimensione [0] e $ height = $ size [1].Spingere() metodo raccogliamo tutte queste informazioni in una matrice.Ora abbiamo la sorgente dell'immagine e la dimensione dell'immagine memorizzata nel elementi variabile. Per verificare, è possibile eseguire la variabile attraverso il console.log () e dovresti trovare la seguente struttura di dati in DevTools.
Successivamente, leghiamo il figura elemento con il clic evento, costruire un'istanza PhotoSwipe, passare il elementi insieme alle opzioni di configurazione e infine inizializza PhotoSwipe.
var $ pswp = $ ('. pswp') [0]; $ pic.on ('click', 'figure', function (event) event.preventDefault (); var $ index = $ (this) .index (); var options = index: $ index, bgOpacity: 0.7, showHideOpacity: true // Inizializza PhotoSwipe var lightBox = new PhotoSwipe ($ pswp, PhotoSwipeUI_Default, items, options); lightBox.init ();); La ragione per cui usiamo il figura l'elemento su cui fare clic, anziché il tag di ancoraggio, è così che siamo in grado di recuperare facilmente l'indice (o l'ordine successivo). Questo ci consente di informare PhotoSwipe dell'indice corretto per sovrapporre l'immagine corrispondente.
Abbiamo appena implementato PhotoSwipe usando jQuery. Il codice è relativamente più sottile e più facilmente comprensibile rispetto a quando scritto in JavaScript vaniglia.
Ora che hai iniziato, puoi anche regolare PhotoSwipe con una manciata di opzioni fornite e persino precaricare l'immagine in modo da vedere immediatamente l'immagine completa dopo aver fatto clic. Lascerò gli stili alla tua immaginazione poiché non ci sono regole rigide per quelli.
Spero che tu abbia imparato qualcosa da questo tutorial e lo trovi utile a volte. Non dimenticare di dare un'occhiata alla demo live e lasciare qualsiasi domanda o idea nei commenti!
