Share
Jeg har nylig kommet over et JavaScript-bibliotek kalt PhotoSwipe, og jeg er virkelig imponert. Det er et glimrende bibliotek som overlegger et bilde eller en gruppe bilder på din nåværende side, en effekt kjent som lysboks. PhotoSwipe er foreløpig utviklet av Dmitry Semenov-han oppbygde det i fjor da han overtok prosjektet. Forbedringer inkluderer:
Den eneste ulempen er at PhotoSwipe ikke går tom for boksen. Som utvikleren sier:
"PhotoSwipe er laget enkelt og raskt for sluttbrukere, ikke for utviklere. Det er ikke en enkel jQuery-plugin, det er minst grunnleggende JavaScript-kunnskap som kreves for å installere.
Men det kan brukes sammen med andre biblioteker. I denne opplæringen skal vi se på hvordan du bruker PhotoSwipe med jQuery. Vi gjør hele prosessen lettforståelig, selv om du ikke er velbevandret i rent JavaScript.
La oss starte.
Vi begynner med:
Accentsconagua
photoswipe.min.js, photoswipe-ui-default.min.js (koden som konstruerer PhotoSwipe brukergrensesnittet), default-skin.css, default-skin.png, default-skin.svg, ogpreloader.gif.HTML-strukturen er den viktigste delen, siden det til slutt vil kjøre hvordan vi skriver JavaScript. Her antar vi at vi har et par bilder, som følger:
Bortsett fra klassen og Schema attributter (som vil hjelpe med SEO), har vi også lagt til en data-* Attributt i ankeretiketten som pakker inn bildet. Dette lagrer full størrelse (bredde x høyde) av bildet.
Nå legger vi til merket som PhotoSwipe vil bruke til å legge over de fulle bildene. Legg til dette like før den avsluttende kroppsmerket,
Vi er alle satt sammen med HTML, så nå kan vi fortsette med JavaScript. Som nevnt vil vi bruke jQuery.
Våre bilder er gruppert innenfor en div med bilde klasse. Det kan være flere flere bildegrupper på siden, derfor løper vi gjennom hverandre .bilde element.
$ ('. bilde'). hver (funksjon () ); PhotoSwipe krever at vi gir hele bildekilden sammen med størrelsen. For å ta vare på dette oppretter vi en funksjon som vil løpe gjennom ankerkoden for å hente disse detaljene, som følger:
$ ('. bilde'). hver (funksjon () var $ pic = $ (dette), getItems = funksjon () var elementer = []; $ pic.find ('a'). var $ href = $ (dette) .attr ('href'), $ size = $ (dette) .data ('size'). splitt ('x'), $ width = $ size [0] = $ size [1]; var item = src: $ href, w: $ bredde, h: $ høyde items.push (item);); returnere elementer; var items = getItems ();); La oss bryte denne koden nedover i flere deler:
elementer = []..Hver() metode.$ href = $ (dette) .attr ('href') oppnår verdien i href attributt, lagre banen til hele bildet.$ size = $ (this) .data ('size'). split ('x') vil få verdien av data-størrelse attributt gjennom jQuery .data() metode. Vi bruker deretter dele()metode for å skille verdien.$ width = $ size [0] og $ høyde = $ størrelse [1].trykk() Metode vi samler all denne informasjonen i en Array.Vi har nå bildekilden og bildestørrelsen lagret i elementer variabel. For å bekrefte kan du kjøre variabelen gjennom console.log () og du bør finne følgende datastruktur i DevTools.
Deretter binder vi figur element med klikk arrangement, konstruer en PhotoSwipe-forekomst, passere elementer sammen med konfigurasjonsalternativene, og endelig initialisere PhotoSwipe.
var $ pswp = $ ('. pswp') [0]; $ pic.on ('klikk', 'figur', funksjon (hendelse) event.preventDefault (); var $ index = $ (dette) .index (); var options = indeks: $ index, bgOpacity: 0,7, showHideOpacity: true // Initialiser PhotoSwipe var lightBox = ny PhotoSwipe ($ pswp, PhotoSwipeUI_Default, elementer, alternativer); lightBox.init ();); Grunnen til at vi bruker figur element for å klikke på, i stedet for ankeretiketten, er slik at vi enkelt kan hente indeksen (eller den etterfølgende rekkefølgen). Dette tillater oss å informere PhotoSwipe om riktig indeks for å overlappe det tilsvarende bildet.
Vi har nettopp implementert PhotoSwipe ved hjelp av jQuery. Koden er sammenlignbart smalere og lettere forståelig enn når den er skrevet i vanilje JavaScript.
Nå er du startet, du kan også justere PhotoSwipe med en håndfull alternativer som tilbys, og til og med forhåndslast bildet slik at du vil se hele bildet umiddelbart ved å klikke. Jeg vil forlate stilene til fantasien din, siden det ikke er noen strenge regler for dem.
Jeg håper du har lært noe fra denne opplæringen, og synes det er nyttig til tider. Ikke glem å sjekke ut live demo og la noen spørsmål eller tanker i kommentarene!
