Mobile Bildvorschau Fotoswipe unterstützt die PC -Bildvorschau und wird hauptsächlich für die mobile Bildvorschau für Android und iOS verwendet.
Ressourcenpaket: fotoswipe-3.0.5
Auf der offiziellen Website von Photoswipe finden Sie einen 1.0.11 -Paket -Download, aber die Version 1.0.11 enthält Mängel. Auf einigen Android -Telefonen werden 2 Bilder gesprungen, wenn sie einmal rutschen.
(Unter normalen Umständen einmal rutschen und 1 Bild springen)
Die übliche Nutzungsmethode lautet wie folgt:
Laden Sie die folgenden Dateien im Ressourcenpaket im Kopf -Tag des HTML:
<script type = "text/javaScript" src = "klass.min.js"> </script> <script type = "text/javaScript" charset = "utf-8" src = "jQuery-1.8.2.js"> </script> <script = "text/javascript" -Script = "utf-8" src type = "text/javaScript" charset = "utf-8" src = "jQuery.transit.js"> </script> <script type = "text/javaScript" charset = "utf-8" src = "hammer.js"> </script type = "text/javascript" utf-8 "Src ="
Das Format einiger HTML -Bilder lautet wie folgt:
<ul id="Gallery"> <li><a href="images/full/001.jpg"><img src="images/thumb/001.jpg" /></a></li> <li><a href="images/full/002.jpg"><img src="images/thumb/002.jpg" /></a></li> <li> <a href = "bilder/faum/004.jpg"> <img src = "Bilder/Thumb/004.jpg"/> </a> </li> <li> <a href = "bilder/full/004.jpg"> <img Src = "Images/Thumb/004.jpg"/> </> </> <a ^ Thumb/0040 href = "Bilder/full/005.jpg"> <img Src = "Bilder/Thumb/005.jpg"/> </a> </li> <li> <a href = "Bilder/full/006.jpg"> <img src = "bilder/006.jpg"/> </a> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </> </>; href="images/full/008.jpg" /></a></li> <li><a href="images/thumb/008.jpg" /></a></li> <li><a href="images/full/009.jpg"><img src="images/thumb/009.jpg" /></a></li> <li><a href="images/full/010.jpg"><img src="images/thumb/010.jpg" /></a></li> <li><a href="images/full/011.jpg" /></a></li> <li><a href="images/full/012.jpg" /></a></li> <li><a href="images/thumb/012.jpg" /></a></li> <li><a href="images/full/012.jpg" /></a></li> <li><a href="images/full/013.jpg"><img src="images/thumb/013.jpg" /></a></li> <li><a href = "Bilder/full/014.jpg"> <img Src = "Bilder/Thumb/014.jpg"/> </a> </li> <li> <a href = "Bilder/full/015.jpg"/> </a> </li> <a> <a href = "ilfits/full/016.jpg"/li> <a <a <a ^ "> full/016.jpg"/> </li> ilw = " href="images/full/016.jpg" /></a></li> <li><a href="images/thumb/016.jpg" /></a></li> <li><a href="images/full/017.jpg"><img src="images/thumb/017.jpg" /></a></li> <li> <a href = "Bilder/full/018.jpg"> <img Src = "Bilder/Thumb/018.jpg"/> </a> </li> </ul>
Der JS -Teil ruft dieses Plugin an, wie in der Demo erwähnt
(Funktion (Fenster, fotosWipe) {document.addeventListener ('domcontentLoded', function () {var options = {}, instance = fotoswipe.attach (window.documentSie können auch verwenden: $ ("#Gallery a"). FotosWipe ();
Wenn der HTML -Teil ein spezielles Format haben muss, kann er auf folgende Weise aufgerufen werden:
1. Deklarieren Sie globale Variablen: var fotoswipe_instance = 0;
2. Für Elemente, die die Vorschau eingeben müssen, ist der Inhalt wie folgt:
arr_images.push ({url: xxx}); var fotoswipe = window.code.photoswipe; var instance = fotoswipe.attach (arr_images, '', fotosWipe_instance); fotoswipe_instance ++; Instance.show (show_current); 3.. Initialisieren Sie in fotoswipe.cache.cacheclass: Funktion (Bilder, Optionen) {var i, j, cacheimer, Bild, SRC, caption, metadata; this.ssetings = Optionen; this.images = []; für (i = 0, j = images.length; i <j; i ++) {image = Bilder [i]; // src = this.Settings.getImageSource (Bild); // Originalcode-Where die Änderung src = image.url; // neuer Code-wo die Änderung caption = this.Settings.getImageCaption (Image); metadata = this.Settings.getImagemetadata (Bild); this.images.push (neue fotoswipe.image.imageClass (Bild, SRC, Bildunterschrift, Metadaten)); }},Darüber hinaus gab es ein Problem mit dem Plug-In und es war erforderlich, die folgenden Änderungen vorzunehmen:
Finden Sie fotoswipe.documentOverlay.DocumentOverlayClass (ursprünglich gab es hier ein Problem mit der Positionierung und Höhe der schwebenden Hintergrundschicht)
ResetPosition: function () {var width, Höhe, oben; if (this.Settings.target === Fenster) {width = util.dom.windowwidth (); // height = util.dom.BoundouterHeight () * 2; // Dies deckt zusätzliche Höhe ab, die durch fotoswipe hinzugefügt wurde // alter Code-Change Height = util.dom.BoDouterHeight (); // neuer Code-Change Place // top = (this.settings.jquerymobile)? Util.dom.windowscrolltop () + 'px': '0px'; // alter Code - wobei die Änderungen top = util.dom.dom.WindowsCrolltop () + 'px'; // neuer Code - wob } if (util.dom.windowHeight ()> Höhe) {height = util.dom.windowHeight (); }} else {width = util.dom.width (this.settings.target); height = util.dom.Height (this.setings.target); top = '0px'; } Util.dom.setStyle (this.el, {width: width, Höhe: Höhe, oben: ober}); },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.