Vista previa de imagen móvil Photoswipe, admite la vista previa de la imagen de PC y se usa principalmente para la vista previa de imágenes móviles para Android e iOS.
Paquete de recursos: Photoswipe-3.0.5
Hay una descarga de paquete 1.0.11 en el sitio web oficial de Photoswipe, pero la versión 1.0.11 tiene defectos. En algunos teléfonos Android, se saltarán 2 imágenes cuando se deslicen una vez.
(En circunstancias normales, deslice una vez y salte 1 imagen)
El método de uso habitual es el siguiente:
Cargue los siguientes archivos en el paquete de recursos en la etiqueta de cabeza del HTML:
<script type = "text/javaScript" src = "klass.min.js"> </script> <script type = "text/javascript" charset = "utf-8" src = "jQuery-1.8.2.2 type = "text/javascript" charset = "utf-8" src = "jQuery.transit.js"> </script> <script type = "text/javascript" charset = "utf-8" src = "hammer.js"> </script> <script type = "text/javascript" charset = "utf-8" src = "jQuery.hatam.hamer.
El formato de algunas imágenes HTML es el siguiente:
<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" <li><a href="images/thumb/004.jpg"><img src="images/thumb/004.jpg" /></a></li> <li><a href="images/full/004.jpg"><img src="images/thumb/004.jpg" /></a></li> <li><a href = "Images/Full/005.jpg"> <img src = "Images/Thumb/005.jpg"/> </a> </li> <li> <a href = "Images/full/006.jpg"> <img src = "Images/Thumb/006.jpg"/> </a> </li> <li> <a 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 = "imágenes/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> </a> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li> <////> <AHI> <ALI> <ALIH. href="images/full/014.jpg"><img src="images/thumb/014.jpg" /></a></li> <li><a href="images/full/015.jpg" /></a></li> <li><a href="images/full/016.jpg" /></a></li> <li><a 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"/> </ail <li> <a href = "imágenes/full/018.jpg"> <img src = "Images/thumb/018.jpg"/> </a> </li> </ul>
La parte JS llama a este complemento como se menciona en la demostración
(function (Window, Photoswipe) {document.adDeventListener ('domContentLoaded', function () {var options = {}, instance = Photoswipe.attach (Window.Document.QuerySelectorAll ('#Gallery A'), Opciones);}, falso);} (Window.Code.Photoswipe));También puede usar: $ ("#Galería A"). Photoswipe ();
Si la parte HTML necesita tener un formato especial, se puede llamar de las siguientes maneras:
1. Declarar variables globales: var photoswipe_instance = 0;
2. Para elementos que necesitan ingresar a la vista previa, el contenido es el siguiente:
arr_images.push ({url: xxx}); var photoswipe = window.code.photoswipe; var instance = photoswipe.attach (arr_images, '', photoswipe_instance); photoswipe_instance ++; instance.show (show_current); 3. Encuentre inicialize en Photoswipe.cache.CacheClass: function (imágenes, opciones) {var i, j, cacheimage, imagen, src, subtítulos, metadatos; this.settings = opciones; this.Images = []; for (i = 0, j = images.length; i <j; i ++) {image = images [i]; // src = this.settings.getImageSource (imagen); // Código original-Donde el cambio src = image.url; // nuevo código-donde el título de cambio = this.settings.getImageCaption (imagen); metadatos = this.settings.getImageMetadata (imagen); this.images.push (nuevo Photoswipe.image.ImageClass (Image, SRC, subtítulos, metadatos)); }},Además, había un problema con el complemento y era necesario hacer las siguientes modificaciones:
Encuentra Photoswipe.documentoverlay.DocumentOverlayClass (originalmente había un problema con el posicionamiento y la altura de la capa flotante de fondo aquí)
ResetPosition: function () {Var ancho, altura, superior; if (this.settings.target === Window) {width = util.dom.windowwidth (); // altura = util.dom.bodyouterHeight () * 2; // Esto cubre la altura adicional agregada por Photoswipe // Old Code-Change Height = util.dom.bodyouterHeight (); // nuevo código-Cambio de lugar // top = (this.settings.jquerymobile)? Util.dom.windowscrolltop () + 'px': '0px'; // antiguo código - donde los cambios son top = util.dom.windowscrolltop () + 'px'; // nuevo código - donde los cambios son si (altura <1) {thight = this.initialBodyHeight; } if (util.dom.windowheight ()> altura) {altura = util.dom.windowheight (); }} else {width = util.dom.width (this.settings.target); altura = util.dom.Height (this.settings.target); top = '0px'; } Util.dom.setStyle (this.el, {ancho: ancho, altura: altura, arriba: superior}); },Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.