Offizielle fotoswipe.js offizielle Website: http://photoswipe.com/, fotoswipe -Dateien und verwandte Beispiele können auf dieser Website heruntergeladen werden.
Diese Komponente wird hauptsächlich zum Anzeigen von Bildern und Alben verwendet und ist sehr praktisch.
1. Die Verwendung dieser Komponente benötigt zwei JS -Dateien
1 <Skript type = "text/javaScript" src = "Simple-Inheritance.min.js">
2 <skript type = "text/javaScript" src = "code-photoswipe-1.0.11.min.js"> <!-Die aktuelle neueste Version sollte 1.0.11-> sein
2. Dann kann die Seitenstruktur so sein
<div ID = "Galerie"> <div> <div> <a href = "Bilder/full/01.jpg"> <img src = "Bilder/Thumb/01.jpg"/> </a> </div> <div> <a href = "Images/full/02.jpg"> <img Src = "Images/02.jpg"/<img Src = "/02.jpg"/> <iMgsrc = "/02.jpg"/> <iMgsrc = "/02.jpg"/> </02./02./02.jpg "/> <img. href = "Bilder/full/04.jpg"> <img Src = "Bilder/full/04.jpg"> <img src = "Bilder/full/04.jpg"> <img src = "Bilder/timbum/04.jpg"/> </a> </div> <a href = "/05.jpg"> <div> <a href = " Src = "Images/Thumb/05.jpg"/> </a> </div> <div> <a href = "Bilder/full/06.jpg"> <img src = "Images/Thumb/06.jpg"/> </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>
Zusätzlich zur Seitenstruktur sind die einzigen Dinge, die in diesem HTML -Code wirklich nützlich sind, id = "Galerie" und <a href = "Bildpfad"> </a> (es wird später erklärt werden). Die andere Klasse spielt nur eine Rolle bei der Verschönerung der Original -Seitenstruktur (anders als die Seite, die Sie wirklich über den Effekt haben möchten, dh Sie müssen nur gemäß der obigen Seitenstruktur eingeben, und der von Ihnen gewünschte Seiteneffekt wird vom Plugin JS selbst abgeschlossen und Sie müssen das Effektlayout nicht schreiben).
Die Seite erfordert sowohl die JS- als auch die Seitenstruktur, und das Folgende ist die Verwendung des Plug-Ins.
3.. Sie können zwei Möglichkeiten nutzen, um Plug-In zu deklarieren
1. Es erfolgt durch AdditionEventListener () im Standardbrowser.
document.adDeVentListener ("DomcontentLoded", function () {code.photoswipe ('a', '#Galerie'); // Dies beinhaltet die ID = "Galerie" und <a href = "..."> </a> In der obigen Seitenstruktur, wobei id = "Galerie" Galerie ist. }, falsch);2. So verwenden Sie JQuery:
$ (Dokument) .Ready (function () {$ ("#Galerie a"). fotosWipe ();});4. Mit dieser Einstellung wird Ihre Seite wahrscheinlich so sein.
Der Effekt der Seite am Anfang:
Nachdem Sie auf ein Bild geklickt haben, wird die Form der Seite wie folgt (diese Seite ist eigentlich die Seite, die ich wirklich möchte):
Sie können den Inhalt in ALT in <img /> über der Seite deutlich sehen, und es finden Sie vier Schaltflächen unten, darunter: Schließen Sie die Seite und kehren Sie zum ursprünglichen Erscheinungsbild (dh das Bild oben), automatische Wiedergabe, Vorgängerseite und Bild der nächsten Seite zurück.
Die Wirkung eines solchen Albums erscheint. Natürlich können Sie die Maus verwenden, um auf dieser Seite nach links und rechts zu wischen. Wenn Sie sich auf einem Handheld -Gerät befinden, können Sie auch nach links und rechts auf Ihren Finger wischen.
Dieses Plugin hat viele Eigenschaften:
DenuserZoom: Ermöglicht Benutzern das Doppelklicken, um Bilder anzuzeigen, indem sie in/verschieben. Standardwert = true
AUTTARTSLIDESHOW: Wenn Fotoswipe aktiviert ist, wird die Diashow automatisch gespielt. Standardwert = false
DELDROTATIONORUSERZOOM: Nur von iOS unterstützt - ermöglicht Benutzern, Bilder mit Gesten im Zoom-/Pan -Modus zu drehen. Standard = false
BackbuttonHideNabled: Drücken Sie die Rückkehrtaste, um Album -Folien zu verbergen. Es wird hauptsächlich von Android und Blackberry verwendet. Unterstützt BB6, Android V2.1, iOS 4 und neuere Versionen. Standardwert = true
captionandtoolbarautohidedelay: Die Verzögerungszeit, die automatisch von der Titelleiste und der Symbolleiste versteckt ist. Der Standardwert ist = 5000 (MS). Wenn es auf 0 gesetzt ist, wird es nicht automatisch versteckt (tippen/klicken, um sichtbar und versteckt zu wechseln).
captionandtoolBarflipposition: Wechselposition zwischen Titelleiste und Symbolleiste (lassen Sie die Bildunterschrift unten angezeigt und die Symbolleiste wird oben angezeigt). Standardwert = false
captionandtoolBarhide: Titelleiste und Symbolleiste ausblenden. Standardwert = false
CaptionandToolBaropacity: Transparenz der Titelleiste und Symbolleiste (0-1). Standardwert = 0,8
captionandtoolBarshowemptyCaptions: Zeigt die Titelleiste an, auch wenn der Titel des aktuellen Bildes leer ist. Standardwert = true
Cachemode: Cache -Modus, code.photoswipe.cache.mode.normal (Standard, Normal) oder code.photoswipe.cache.mode.aggressiv (radikal, aktiv). Entscheidet, wie fotoswipe Image -Cache -Cache verwaltet.
Der aggressive Modus setzt aktiv die Art von nicht aktuellen, vorherigen, nächsten "-Bildern, die leer sind. Es wird für Speicherüberläufe in älteren iOS -Browsern nützlich sein. In den meisten Fällen ist der normale Modus in Ordnung.
DoubleTapSpeed: Das maximale Intervall zum Doppelklicken. Standardwert = 300 (MS)
DoubletapzoomLevel: Wenn der Benutzer doppelklickt, ist das Vergrößerungs-Multiple das Standard "Zoom-In" -Pegel. Standardwert = 2,5
AktiviertRag: Ermöglicht das Ziehen des vorherigen/nächsten Bildes an die aktuelle Schnittstelle. Standardwert = true
EnableKeyboard: Ermöglichen Sie Tastaturvorgänge (linke und linke Pfeilschalter, ESC -Beenden, automatische Wiedergabe, Space -Bar -Anzeige/Hidden Title Bar/Exit). Standard = true
EnableMouseWheel: Ermöglicht den Betrieb des Mausrads. Standard = true
Fadeinspeed: Die Geschwindigkeit (Dauer) des Effektelements, Millisekunden. Standard = 250
Fadeoutspeed: Die Geschwindigkeit (Dauer) des Effektelements, Millisekunden. Standard = 250
ImagesCalemethod: Bildskalierungsmethode (Modus). Optionale Werte: "Fit", "Fitnouscale" und "Zoom". Modus "Fit" stellt sicher, dass sich das Bild an den Bildschirm anpasst. "Fitnouscale" ähnelt "Fit", vergrößert das Bild, vergrößert jedoch nicht. "Zoom" wird das Bild vollständig untersuchen, aber es ist möglich, dass die Bildskalierung nicht gleich proportional ist. Default = "fit"
InvertMousewheel: Umdrehen Sie das Mausrad. Standardmäßig wechselt das Scrollen der Maus zum nächsten Bild und bis zum vorherigen Bild. Standard = false
JQueryMobile: Gibt an, ob FotosWipe in das mobile JQuery -Projekt integriert ist. Standardmäßig wird Fotoswipe versuchen, dies für Sie auszuarbeiten
JQueryMobiledialoghash: Jquery Mobile Hash -Tag, das für das Fenster und die Dialogseiten verwendet wird. Standardwert = "& ui-state = Dialog" Dialog ""
Schleife: Ob das Album automatisch Schleifen ist. Standard = true
Rand: Das Intervall zwischen zwei Bildern ist das Gerät Pixel. Standard = 20
Maxuserzoom: Maximale Vergrößerung. Standard = 5.0 (auf 0 gesetzt wird ignoriert)
Minuserzoom: Das kleinste Reduktion mehrfach des Bildes. Standard = 0,5 (auf 0 eingestellt wird ignoriert)
Mauswheelspeed: Empfindlichkeit als Reaktion auf Mausrad. Standard = 500 (MS)
NEXTPREVIOUSSLIDESPEED: Wie viele Millisekunden werden verzögert, nachdem er auf die vorherige und nächste Schaltflächen geklickt hat. Standard = 0 (jetzt Switch)
Vorbeugung: verhindert, dass der Benutzer Fotoswipe schließt. Es wird auch die "Schließen" -Staste in der Symbolleiste ausblenden. Verwenden Sie es auf der exklusiven Seite (das Beispiel ist Beispiele/08-exklusive Modelle.html im Quellcode). Standard = false
Verhindert Lideshow: Blockiert den automatischen Wiedergabemodus. Es wird auch die Wiedergabetaste in der Symbolleiste ausblenden. Standard = false
Diashowdelay: Wie lange dauert es, das nächste Bild im automatischen Spielmodus zu spielen? Standard = 3000 (MS)
Rutschenschwankungen: Die Zeit, in der das Bild in die Ansicht gleitet. Standard = 250 (MS)
Swipethreshold: Mit wie vielen Pixeln wird ein Finger ausgelöst, um ein Swipe -Gestenereignis auszulösen. Standard = 50
Swipetimethreshold: Definiert die maximale Anzahl von Millisekunden, um die Swipe -Geste auszulösen. Wenn es zu langsam ist, wird die Folie nicht ausgelöst und ziehen nur die Position des aktuellen Fotos. Standard = 250
Slidetimingfunktion: Lockerungsfunktion beim Gleiten. Default = "Easy-Out"
Zindex: Der anfängliche Zindex -Wert. Standard = 1000
EnableUiWebViewRepositionTimeout: Überprüft, ob sich die Ausrichtung des Geräts geändert hat. Standard = false
UIWebViewResetPositionDelay: Die Zeit, um zu überprüfen, ob sich die Richtung des Geräts regelmäßig ändert, beträgt 500 (MS).
PREIVEDEFAULTTOUCHEDEVENTS: Blockiert Standard -Touch -Ereignisse wie das Scrollen von Seiten. Standard = true
Ziel: Muss ein rechtliches DOM -Element sein (z. B. Div). Das Standardfenster ist ein Fenster (vollständige Seite). Wenn es sich um ein DOM auf niedrigem Niveau handelt, wird es im DOM angezeigt und ist möglicherweise nicht vollständig.
Wenn Sie die erste Seite nicht anzeigen und die zweite Seite direkt anzeigen müssen, können Sie sie so festlegen:
$ (Dokument) .Ready (function () {// fotosWipe, einstellen "vorab": true "var thumbels = code.photoswipe ('a', '#Gallery', {vorabhide: true}); code.photoswipe.current.show (0);});Natürlich hat dieses Plugin viele andere Hörfunktionen:
document.addeventListener ('domcontentLoded', function () {// onBeForeshow diese Methode, bevor die Galerie angezeigt wird. Code.photoswipe.current.adDeVentListener (code.photoswipe.eventypes.onshow, e) {console.log ("onBeforshow");}); console.log ("onshow");}); Code.photoswipe.current console.log ('onShownext');}); Code.photoswipe.current.addeventListener (code.photoswipe.eventypes.ondisplayImage, Funktion (e) {console.log ('OnDisplayImage');}); Code.photoswipe.current hat den SlideShowCode.photoswipe.current.AdDeVentListener (code.photoswipe.eventTypes.onSlideshowstart, Funktion (e) {console.log ('Onslideshowstart');}); Code.photoswipe.current.adDeVentListener (code.photoswipe.eventTypes.onslideshowstop, Funktion (e) {console.log ('onslideshowStop');}); Code.photoswipe.current.adDeVentListener (code.photoswipe.eventypes.onbeForeCaptionandToolBarshow, Funktion (e) {console.log ('onBeForeCaptionandToolBarshow');}); Code.photoswipe.current BeideCaptionandToolBarhide löst normalerweise bei der Verfesselung und der Methode des Methods.Da die aufrufende Methode der API -Schnittstelle nicht auf der offiziellen Website von Photoswipe gefunden wird und die aktuelle Ebene von JS nicht sehr gut ist, sind einige seiner API -Schnittstellen im Grunde nicht gut verstanden. Als ich jedoch ihr Beispiel überprüfte, stellte ich fest, dass eine Variable häufig erscheint, code.photoswipe oder code.photoswipe.current. Alle von ihnen wurden in der Konsole durchgeführt. Als ich Code.Photoswipe eingab, wurde der folgende Inhalt angezeigt:
Obwohl Sie nicht vollständig verstehen können, was es ist, können Sie erkennen, dass das aktuelle Element enthalten ist. Geben Sie dann code.photoswipe.current in der Konsole ein, um den folgenden Inhalt zu erhalten:
Hier finden Sie weitere Informationen, z. B. CurrentIndex zeigt an, dass das aktuelle Bild in der Liste indiziert ist, und die gesamte Verbindung ist code.photoswipe.current.currentIndex repräsentiert die indizierte Position des aktuellen Bildes. Diese Informationen sind mir sehr wichtig. Auf diesen Informationen können wir verschiedene Seiteninformationen auf verschiedenen Seiten anzeigen.
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.