Share
Ich bin kürzlich auf eine JavaScript-Bibliothek namens PhotoSwipe gestoßen, und ich bin wirklich beeindruckt. Es ist eine brillante Bibliothek, die ein Bild oder eine Gruppe von Bildern auf Ihrer aktuellen Seite überlagert, ein Effekt, der allgemein als bekannt ist Leuchtkasten. PhotoSwipe wird derzeit von Dmitry Semenov entwickelt - er hat es letztes Jahr umgebaut, als er das Projekt übernahm. Verbesserungen umfassen:
Der einzige Nachteil ist, dass PhotoSwipe nicht aus der Box läuft. Wie der Entwickler feststellt:
„PhotoSwipe ist für Endbenutzer einfach und schnell gemacht, nicht für Entwickler. Es ist kein einfaches jQuery-Plugin. Zur Installation sind mindestens grundlegende JavaScript-Kenntnisse erforderlich.
Es kann jedoch in Verbindung mit anderen Bibliotheken verwendet werden. In diesem Lernprogramm wird beschrieben, wie PhotoSwipe mit jQuery verwendet wird. Wir machen den gesamten Prozess leicht verständlich, auch wenn Sie sich mit reinem JavaScript nicht auskennen.
Lass uns einen Anfang machen.
Wir beginnen mit:
Accentsconagua
photoswipe.min.js, photoswipe-ui-default.min.js (der Code, der die PhotoSwipe-Benutzeroberfläche erstellt), default-skin.css, default-skin.png, default-skin.svg, undpreloader.gif.Die HTML-Struktur ist der wichtigste Teil, da sie letztendlich das Schreiben von JavaScript beeinflussen wird. Hier nehmen wir an, dass wir ein paar Bilder haben, wie folgt:
Neben der Klasse und den Schema-Attributen (die bei SEO hilfreich sind) haben wir auch ein hinzugefügt Daten-* Attribut im Ankertag, der das Bild umschließt. Dies speichert die volle Größe (Breite x Höhe) des Bildes.
Jetzt fügen wir das Markup hinzu, mit dem PhotoSwipe die vollständigen Bilder überlagert. Fügen Sie dies kurz vor dem schließenden Body-Tag hinzu,
Wir haben alles mit HTML zu tun, also können wir jetzt mit dem JavaScript fortfahren. Wie erwähnt werden wir jQuery verwenden.
Unsere Bilder sind in einem gruppiert div mit dem Bild Klasse. Es können mehrere weitere Bildgruppen auf der Seite vorhanden sein, daher werden alle durchlaufen .Bild Element.
$ ('. picture'). each (function () ); Bei PhotoSwipe müssen wir die vollständige Bildquelle zusammen mit ihrer Größe angeben. Um dies zu gewährleisten, erstellen wir eine Funktion, die das Ankertag durchläuft, um diese Details wie folgt abzurufen:
$ ('. 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 (item);); Elemente zurückgeben; var items = getItems ();); Lassen Sie uns die folgenden Code-Downs in mehrere Teile aufteilen:
items = []..jeder() Methode.$ href = $ (this) .attr ('href') erhält den Wert in der href Attribut, das den Pfad des vollständigen Bildes speichert.$ size = $ (this) .data ('size'). split ('x') erhält den Wert von Datengröße Attribut durch die jQuery .Daten() Methode. Wir benutzen dann die Teilt()Methode, um den Wert zu trennen.$ width = $ size [0] und $ height = $ size [1].drücken() Methode sammeln wir alle diese Informationen in einem Array.Nun haben wir die Bildquelle und die Bildgröße im gespeichert Artikel Variable. Zur Überprüfung können Sie die Variable über die console.log () und Sie sollten die folgende Datenstruktur in den DevTools finden.
Als nächstes binden wir das Zahl Element mit der klicken erstellen Sie eine PhotoSwipe-Instanz, übergeben Sie die Artikel zusammen mit den Konfigurationsoptionen und schließlich PhotoSwipe initialisieren.
var $ pswp = $ ('. pswp') [0]; $ pic.on ('click', 'figure', Funktion (Ereignis) event.preventDefault (); var $ index = $ (this) .index (); var options = index: $ index, bgOpacity: 0.7, showHideOpacity: true // Initialisieren Sie PhotoSwipe var lightBox = new PhotoSwipe ($ pswp, PhotoSwipeUI_Default, Elemente, Optionen); lightBox.init ();); Der Grund, warum wir das verwenden Zahl Das Element, auf das Sie klicken, und nicht das Ankertag, ist so, dass wir den Index (oder die nachfolgende Reihenfolge) problemlos abrufen können. Dadurch können wir PhotoSwipe über den korrekten Index informieren, um das entsprechende Bild zu überlagern.
Wir haben PhotoSwipe gerade mit jQuery implementiert. Der Code ist vergleichsweise schlanker und verständlicher als in Vanilla-JavaScript geschrieben.
Nun können Sie PhotoSwipe mit einer Handvoll Optionen anpassen und sogar das Bild vorladen, so dass Sie sofort das gesamte Bild sehen, wenn Sie darauf klicken. Ich werde die Stile Ihrer Fantasie überlassen, da es keine strengen Regeln dafür gibt.
Ich hoffe, Sie haben etwas aus diesem Tutorial gelernt und finden es manchmal nützlich. Vergessen Sie nicht, die Live-Demo zu überprüfen und Fragen oder Gedanken in den Kommentaren zu hinterlassen!
