Share
Ik kwam onlangs een JavaScript-bibliotheek tegen met de naam PhotoSwipe en ik ben echt onder de indruk. Het is een schitterende bibliotheek die een afbeelding of een groep afbeeldingen op uw huidige pagina overlapt, een effect dat in de volksmond bekend staat als lichtbak. PhotoSwipe is momenteel ontwikkeld door Dmitry Semenov - hij herbouwde het vorig jaar toen hij het project overnam. Verbeteringen zijn onder meer:
Het enige nadeel is dat PhotoSwipe niet uit de doos zal zijn. Zoals de ontwikkelaar zegt:
"PhotoSwipe is eenvoudig en snel gemaakt voor eindgebruikers, niet voor ontwikkelaars. Het is geen eenvoudige jQuery-plugin, er is ten minste basiskennis van JavaScript vereist om te installeren.
Maar het kan worden gebruikt in combinatie met andere bibliotheken. In deze zelfstudie gaan we kijken hoe PhotoSwipe met jQuery gebruikt kan worden. We maken het hele proces eenvoudig te begrijpen, zelfs als je niet goed thuis bent in pure JavaScript.
Laten we beginnen.
We beginnen met:
Accentsconagua
photoswipe.min.js, photoswipe-ui-default.min.js (de code die de gebruikersinterface PhotoSwipe samenstelt), default-skin.css, default-skin.png, default-skin.svg, enpreloader.gif.De HTML-structuur is het meest essentiële onderdeel omdat het uiteindelijk de manier zal bepalen waarop we het JavaScript schrijven. Hier gaan we ervan uit dat we een aantal afbeeldingen hebben, als volgt:
Afgezien van de klasse en de Schema-kenmerken (die zullen helpen met SEO), hebben we ook een gegevens-* attribuut in de ankertag die de afbeelding omwikkelt. Hiermee wordt de volledige grootte (breedte x hoogte) van de afbeelding opgeslagen.
Nu voegen we de markup toe die PhotoSwipe zal gebruiken om de volledige afbeeldingen te overlappen. Voeg dit toe net voor de afsluitende body-tag,
We zijn helemaal klaar met de HTML, dus nu kunnen we doorgaan met JavaScript. Zoals vermeld zullen we jQuery gebruiken.
Onze afbeeldingen zijn gegroepeerd in een div met de afbeelding klasse. Er kunnen nog meerdere afbeeldingsgroepen op de pagina staan, vandaar dat we ze allemaal doorlopen .afbeelding element.
$ ('. picture'). each (function () ); PhotoSwipe vereist dat we de volledige afbeeldingsbron samen met de bijbehorende afmeting leveren. Om dit te regelen, maken we een functie die door de ankertag gaat om deze gegevens als volgt op te halen:
$ ('. 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 = $ grootte [1]; var item = src: $ href, w: $ width, h: $ height items.push (item);); return items; var items = getItems ();); Laten we de code splitsen in verschillende stukken:
items = []..elk() methode.$ href = $ (this) .attr ('href') verkrijgt de waarde in de href attribuut, het pad van het volledige beeld opslaan.$ size = $ (this) .data ('size'). split ('x') zal de waarde van de verkrijgen data-size attribuut via de jQuery .gegevens() methode. We gebruiken dan de de split ()methode om de waarde te scheiden.$ width = $ size [0] en $ height = $ size [1].Duwen() methode we verzamelen al deze informatie in een array.We hebben nu de afbeeldingsbron en de afbeeldingsgrootte opgeslagen in de items variabel. Ter verificatie kunt u de variabele door de console.log () en je zou de volgende gegevensstructuur in de DevTools moeten vinden.
Vervolgens binden we de figuur element met de Klik gebeurtenis, maak een PhotoSwipe-instantie aan, sla de items samen met de configuratie-opties en ten slotte PhotoSwipe initialiseren.
var $ pswp = $ ('. pswp') [0]; $ pic.on ('klik', 'figuur', functie (event) event.preventDefault (); var $ index = $ (this) .index (); var options = index: $ index, bgOpacity: 0.7, showHideOpacity: true // Initialize PhotoSwipe var lightBox = new PhotoSwipe ($ pswp, PhotoSwipeUI_Default, items, options); lightBox.init ();); De reden dat we de figuur element waarop moet worden geklikt in plaats van de ankertag, zodat we de index (of de daaropvolgende volgorde) gemakkelijk kunnen ophalen. Dit stelt ons in staat om PhotoSwipe op de hoogte te stellen van de juiste index om de overeenkomstige afbeelding te overlappen.
We hebben zojuist PhotoSwipe geïmplementeerd met jQuery. De code is vergelijkbaar slanker en begrijpelijker dan wanneer geschreven in vanilla JavaScript.
Nu je bent begonnen, kun je PhotoSwipe ook aanpassen met een handvol beschikbare opties en zelfs de afbeelding vooraf laden, zodat je meteen bij het klikken het volledige beeld ziet. Ik laat de stijlen aan je verbeelding over, want daar zijn geen strenge regels voor.
Ik hoop dat je iets van deze tutorial hebt geleerd en het soms handig vindt. Vergeet niet om de live demo te bekijken en laat eventuele vragen of gedachten achter in de comments!
