FOTOSWIPE ist ein Fotoalbum/Spiel, das speziell für mobile Touch -Geräte entwickelt wurde. Es ist mit allen iPhone-, iPad-, BlackBerry 6+- und Desktop -Browsern kompatibel. Die zugrunde liegende Implementierung basiert auf HTML/CSS/JavaScript und ist ein kostenloses und Open -Source -Fotoalbumprodukt.
Für wen
Lassen Sie die mobile Website das Album des Albums wie die native App erleben.
Ausgezeichnete Funktionen
PhotosWipe bietet Benutzern eine vertraute und intuitive interaktive Schnittstelle.
Offizielle Website
http://www.photoswipe.com/
Beispiel für Quellcode
http://github.com/downloads/codecomputerlove/photoswipe/code.photoswipe-3.0.zip
Github
https://github.com/codecomputerlove/photoswipe
Online -Demo
http://www.photoswipe.com/latest/examples/04-jquery-mobile.html
Kompatibilitätsfunktionen
PhotosWipe ist mit einer großen Anzahl von mobilen Geräten und allen beliebten Bibliotheken/Entwicklungs -Frameworks von JavaScript -Klassen kompatibel. Es gibt sowohl JQuery-basierte Versionen, JQuery-freie Versionen als auch JQuery-Versionen für mobile kompatible Versionen. Natürlich befindet sich alles in einem im Quellcode -Beispielpaket.
Wie man benutzt
FOTOSWIPE ist eine unabhängige JavaScript -Bibliothek, die einfach in Ihre Website integriert werden kann. Für mobile Browser (Webkits) wurden viele Optimierungen durchgeführt. Für Desktop -Browser und JQueryMobile werden natürlich auch im Quellcodepaket entsprechende Versionen bereitgestellt.
Klassenbibliotheksreferenzen
<!- fotoswipe referenzierte Klass zuvor. Wenn Sie die Ladegeschwindigkeit erhöhen müssen, können Sie dem Skript-> ein Defer-Tag/Attribut hinzufügen->
<script type = "text/javaScript" src = "klass.min.js"> </script>
<!- Wichtiger Hinweis, wenn Sie die JQuery-Version nicht verwenden, tritt unter IE ein Fehler auf. Wenn Sie die JQuery-Version verwenden, müssen Sie natürlich JQuery vorstellen->
<script type = "text/javaScript" src = "code.photoswipe-3.0.5.min.js"> </script>
Anrufcode
/* Fügen Sie das Domcontent -Ereignisanhören hinzu, ähnlich wie die Ready -Funktion von JQuery.
Beispiele für Standardmethoden/01-Default.html
Bitte überprüfen Sie die .examples/09-EXCLUSIVE-Mode-No-Thumbnails.html für keinen Miniaturansichten.
*/
// Die Methode von fotosWipe.attach empfängt 3 Parameter (HTML -Elementerfassung, optionale Konfigurationsinformationen und optionale Zeichenfolge Typ -ID, wenn mehrere Instanzen)
document.addeventListener ('domcontentled', function () {
// fotoswipe festlegen, um an alle <a> Tags unter dem Container mit der ID als Galerie zu binden. Klicken Sie hier, um zu aktivieren
// Das Objekt hier ist eine Fotoswipe -Instanz, und Sie können entsprechende Methoden wie Show (0), Hide () usw. verwenden.
var myphotoswipe = code.photoswipe.attach (window.document.querySelectorAll ('#Galerie A'), {EnableMousewheel: false, enableKeyboard: false});
}, FALSCH);
Wenn Sie JQuery verwenden, lautet der Anrufcode wie folgt:
// JQuery -Version muss die entsprechende JS -Datei auch in der JS -Datei geändert werden
// Beispiele/02-jquery.html finden Sie für Beispiele für Beispiele für Beispiele
$ (Dokument) .Ready (function () {
// Das Objekt hier ist eine Fotoswipe -Instanz, und Sie können entsprechende Methoden wie Show (0), Hide () usw. verwenden.
var myphotoswipe = $ ("#galerie a"). fotosWipe ({EnableMouseWheel: false, enableKeyboard: false});
});
HTML -Code
<!- Ul Li und andere Dinge werden verwendet, um Miniaturansichten anzuzeigen, und können nach Bedarf auch angepasst werden. Das unten stehende <img> Element ist ein Miniaturbild. Wenn nicht erforderlich, kann SRC auf leer eingestellt werden ->
<ul id = "Galerie">
<li> <a href = "bilder/full/01.jpg"> <img src = "Bilder/Thumb/01.jpg"/> </a> </li>
<li> <a href = "Bilder/full/02.jpg"> <img src = "Bilder/thumb/02.jpg"/> </a> </li>>
<li> <a href = "Bilder/full/03.jpg"> <img src = "Bilder/Thumb/03.jpg"/> </a> </li>>
<li> <a href = "Bilder/full/04.jpg"> <img src = "Bilder/thumb/04.jpg"/> </a> </li>>
<li> <a href = "Bilder/full/05.jpg"> <img src = "Bilder/Thumb/05.jpg"/> </a> </li>>
<li> <a href = "Bilder/full/06.jpg"> <img src = "Bilder/Thumb/06.jpg"/> </a> </li>>
</ul>
Parameterbeschreibung
1.AllowUserzoom: Ermöglicht Benutzern das Doppelklicken, um Bilder anzuzeigen, indem sie in/verschieben. Standardwert = true
2.AutostartSlideshow: Wenn Fotoswipe aktiviert ist, wird die Diashow automatisch gespielt. Standardwert = false
3.AllowRotationonUserZoom: Nur von iOS unterstützt - ermöglicht Benutzern, Bilder mit Gesten im Zoom-/Pan -Modus zu drehen. Standardwert = false
4. BackbuttonHideenabled: Drücken Sie die Rückgabe -Taste, um Albumrutschen zu verbergen. Es wird hauptsächlich von Android und Blackberry verwendet. Es unterstützt BB6, Android V2.1, iOS 4 und neuere Versionen. Standardwert = true
5.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).
6.CaptionandToolBarfliPosition: Schalten Sie die Titelleiste und die Symbolleiste um (Lassen Sie die Bildunterschrift unten angezeigt und die Symbolleiste wird oben angezeigt). Standardwert = false
7.CaptionandToolBarhide: Titelleiste und Symbolleiste ausblenden. Standardwert = false
8. KaptionandtoolBaropacity: Transparenz der Titelleiste und Symbolleiste (0-1). Standardwert = 0,8
9. Standardwert = true
10.Cachemode: Cache -Modus, code.photoswipe.cache.mode.normal (Standard, Normal) oder code.photoswipe.cache.mode.aggressive (radikal, aktiv). Entscheidet, wie fotoswipe Image -Cache -Cache verwaltet.
11. 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.
12.DoubletAPSPeed: Das maximale Intervall zum Doppelklicken. Standardwert = 300 (MS)
13. Standardwert = 2,5
14.EnabledRag: Ermöglicht das Ziehen des vorherigen/nächsten Bildes an die aktuelle Schnittstelle. Standardwert = true
15. Standard = true
16. Standard = true
17.Fadeinspeed: Die Geschwindigkeit (Dauer) des Effektelements, Millisekunden. Standard = 250
18.FadeoutSpeed: Die Geschwindigkeit (Dauer) des Fade Effect -Elements, Millisekunden. Standard = 250
19.ImageCalemethod: 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"
20. Standardmäßig wechselt das Scrollen der Maus zum nächsten Bild und bis zum vorherigen Bild. Standard = false
21.JQueryMobile: Gibt an, ob Fotoswipe in das mobile Jquery -Projekt integriert ist. Standardmäßig wird Fotoswipe versuchen, dies für Sie auszuarbeiten
22. Standardwert = "& ui-state = Dialog" Dialog ""
23.Loop: Ob das Album automatisch schleift. Standard = true
24.Margin: Das Intervall zwischen zwei Bildern ist das Gerät Pixel. Standard = 20
25.Maxuserzoom: Maximale Vergrößerung. Standard = 5.0 (auf 0 gesetzt wird ignoriert)
26.Minuserzoom: Das kleinste Reduktion mehrerer des Bildes. Standard = 0,5 (auf 0 eingestellt wird ignoriert)
27.Mousewheelspeed: Empfindlichkeit als Reaktion auf Mausrad. Standard = 500 (MS)
28. Standard = 0 (jetzt Switch)
29.Preventhide: verhindert, dass Benutzer Fotoswipe schließen. 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
30.PreventSlideshow: Blockiert automatischer Wiedergabemodus. Es wird auch die Wiedergabetaste in der Symbolleiste ausblenden. Standard = false
31.Slideshowdelay: Wie lange dauert es, das nächste Bild im automatischen Spielmodus zu spielen? Standard = 3000 (MS)
32.Slidesspeed: Die Zeit, in der das Bild in die Ansicht gleitet. Standard = 250 (MS)
33. WIPETHRESHOD: Wie viele Pixel gleitet der Finger ein, um ein Swipe -Gestenereignis auszulösen. Standard = 50
34. wipetimethreshold: 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
35.Slidetimingfunction: Lockerungsfunktion beim Gleiten. Default = "Easy-Out"
36.Zindex: Der anfängliche Zindex -Wert. Standard = 1000
37. Standard = false
38.UiwebviewResetPositionDelay: Die Zeit, um zu überprüfen, ob sich die Richtung des Geräts regelmäßig ändert
39.PreventDefaulttouchEvents: Blockiert das Standard -Touch -Ereignis, z. B. das Scrollen von Seiten. Standard = true
40.Target: 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.
Benutzerdefinierte Funktionen
GetToolBar: function () { /*Gibt die HTML -Zeichenfolge zurück in der Symbolleiste* /} GetImageSource: Funktion (el) { /*Sagen Sie Galerie, wie Sie den SRC des Bildes erhalten. Standardmäßig geht Galerie davon aus, dass Sie das <a> -Tag zum Wickeln des Miniaturansatzes <IMG> verwenden, und das HREF -Attribut des <a> Tags ist die URL des vollständigen Bildes. Zu diesem Zeitpunkt kann diese Methode verwendet werden, um den Pfad des Bildes des entsprechenden Elements zurückzugeben. Es kann von allen Arten sein. Zum Beispiel Rel -Attribut oder so. Es wäre einfacher, JQuery zu haben. */ return el.getAttribute ('rel'); }, getImageCaption: function (el) { /** Wie die GetImageSource -Methode gibt diese Methode den Titel des Bildes zurück. Standardmäßig sucht die Galerie nach dem ALT -Attribut des Bildes. * /}, getImagemetadata: function (el) { / ** Wenn Sie OnDisplayImage anhören, können Sie über diese Funktion zusätzliche Meta -Informationen erhalten. Und verwenden Sie */ return in OndisplayImage {longDescription: El.GetAttribute (el, 'data-long-Decription')}}}}}}}}}Für Android -Telefone führt ein Klick dazu, dass das Klicken auf eine Ebene geschlossen wird, und die untere Ebene löst dennoch das Klickereignis aus. Unsere Lösung lautet wie folgt:
// Trigger -Klicks auf mehreren Ebenen auf Android -Telefonen. Wir verwenden einen Timer, um var event_timeout = 500; // mehrere Ereignisauslöser zu verhindern // aufeinanderfolgende Ereignisse in kurzer Zeit blockieren var multiclickPrevent = false; Funktion PURTMULTICLICK () {if (multiclickPrevent) {return false; } multiclickPrevent = true; window.settimeout (function () {multiclickPrevent = false;}, event_timeout); zurückkehren; }; // Anpassung an den Browser var userAgent = navigator.useragent; var Likeios = userAgent.match (/iPad | iPhone | iPod/i); var likeandroid = userAgent.match (/android/i); var SpecialClick = "Click"; if (likeios) {SpecialClick = "TouchStart Click"; } else if (likeAndroid) {SpecialClick = "TouchStart Click"; } /Beispiel $ (". T_right"). Live (SpecialClick, function () {if (vorbeugungMulticlick ()) {// andere Operationen ausführen} else {// sonst soll die Operation ablehnen, können Sie falsche oder andere Rückgabe falsch zurückgeben;}}); // Beispiel $ ("Body"). Live (SpecialClick, Function () {if (vorbeugungMulticlick ()) {// andere Operationen ausführen}});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.