Share
Jag kom nyligen över ett JavaScript-bibliotek som heter PhotoSwipe, och jag är verkligen imponerad. Det är ett strålande bibliotek som överlägger en bild eller en grupp bilder på din nuvarande sida, en effekt som i allmänhet kallas ljuslåda. PhotoSwipe utvecklas för närvarande av Dmitry Semenov-han byggde om det förra året när han tog över projektet. Förbättringar inkluderar:
Den enda nackdelen är att PhotoSwipe inte löper ut ur lådan. Som utvecklaren säger:
"PhotoSwipe görs enkelt och snabbt för slutanvändare, inte för utvecklare. Det är inte ett enkelt jQuery-plugin, det krävs åtminstone grundläggande JavaScript-kunskap för att installera.
Men det kan användas tillsammans med andra bibliotek. I denna handledning ska vi titta på hur man använder PhotoSwipe med jQuery. Vi gör hela processen lätt begriplig, även om du inte är välkänd i ren JavaScript.
Låt oss börja.
Vi börjar med:
Accentsconagua
photoswipe.min.js, photoswipe-ui-default.min.js (koden som konstruerar PhotoSwipe-gränssnittet), default-skin.css, default-skin.png, default-skin.svg, ochpreloader.gif.HTML-strukturen är den viktigaste delen eftersom det i slutändan kommer att driva hur vi skriver JavaScript. Här antar vi att vi har ett par bilder, enligt följande:
Bortsett från klassen och Schema attributen (som kommer att hjälpa till med SEO), har vi också lagt till en data-* attribut i ankaretiketten som lägger in bilden. Detta lagrar bilden i full storlek (bredd x höjd).
Nu lägger vi till den markering som PhotoSwipe kommer att använda för att överlappa hela bilderna. Lägg till detta strax före stängningskroppen,
Vi är alla med HTML, så nu kan vi fortsätta med JavaScript. Som sagt kommer vi att använda jQuery.
Våra bilder är grupperade inom en div med bild klass. Det kan finnas flera fler bildgrupper på sidan, så vi slår igenom varandra .bild element.
$ ('. bild'). varje (funktion () ); PhotoSwipe kräver att vi tillhandahåller hela bildkällan tillsammans med dess storlek. För att ta hand om detta skapar vi en funktion som går genom ankerkoden för att hämta dessa detaljer, enligt följande:
varje (funktion () var $ pic = $ (detta), getItems = function () var items = []; $ pic.find ('a'). var $ href = $ (detta) .attr ('href'), $ size = $ (detta) .data ('storlek'). split ('x'), $ width = $ size [0] = $ size [1]; var item = src: $ href, w: $ bredd, h: $ höjd items.push (item);); returnera poster; var items = getItems ();); Låt oss bryta ner denna kod nedåt i flera delar:
poster = []..varje() metod.$ href = $ (detta) .attr ('href') får värdet i href attribut, lagra sökvägen för hela bilden.$ size = $ (this) .data ('size'). split ('x') kommer att få värdet av datastorlek attribut genom jQuery .data() metod. Vi använder sedan dela()metod för att skilja värdet.$ width = $ size [0] och $ höjd = $ storlek [1].tryck() Metod vi samlar all denna information i en Array.Vi har nu bildkällan och bildstorleken lagrad i objekt variabel. För att verifiera kan du köra variabeln genom console.log () och du bör hitta följande datastruktur i DevTools.
Därefter binder vi figur element med klick händelse, konstruera en PhotoSwipe-instans, passera objekt tillsammans med konfigurationsalternativen, och slutligen initiera PhotoSwipe.
var $ pswp = $ ('. pswp') [0]; $ pic.on ('klick', 'figur', funktion (händelse) event.preventDefault (); var $ index = $ (detta) .index (); var options = index: $ index, bgOpacity: 0.7, showHideOpacity: true // Initialisera PhotoSwipe var lightBox = ny PhotoSwipe ($ pswp, PhotoSwipeUI_Default, objekt, alternativ); lightBox.init ();); Anledningen till att vi använder figur element för att klicka på, snarare än ankerkoden, är så att vi enkelt kan hämta indexet (eller efterföljande ordning). Detta gör att vi kan informera PhotoSwipe om rätt index för att överlappa motsvarande bild.
Vi har just implementerat PhotoSwipe med jQuery. Koden är jämförbart smalare och lättare förståelig än när den skrivs i vanilj JavaScript.
Nu är du igång, du kan också justera PhotoSwipe med ett handfullt alternativ som tillhandahålls och till och med förinställa bilden så att du kan se hela bilden direkt när du klickar. Jag kommer att lämna stilerna till fantasin eftersom det inte finns några strikta regler för dem.
Jag hoppas att du har lärt dig någonting från den här handledningen och tycker att den är användbar ibland. Glöm inte att kolla in live demo och lämna några frågor eller tankar i kommentarerna!
