Aperçu de l'image mobile Photoswipe, prend en charge l'aperçu de l'image PC et est principalement utilisé pour l'aperçu de l'image mobile pour Android et iOS.
Package de ressources: Photoswipe-3.0.5
Il y a un téléchargement de package 1.0.11 sur le site officiel de Photoswipe, mais la version 1.0.11 a des défauts. Sur certains téléphones Android, 2 photos seront sautées lorsqu'elles glissent une fois.
(Dans des circonstances normales, glissez une fois et saut 1 image)
La méthode d'utilisation habituelle est la suivante:
Chargez les fichiers suivants dans le package de ressources dans la balise de tête du 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 type = "text / javascript" charset = "utf-8" src = "jQuery.transitt" type = "text / javascript" charset = "utf-8" src = "jquery.transit.js"> </ script> <script type = "text / javascrip
Le format de certaines images HTML est la suivante:
<ul id = "galerie"> <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. <li> <a href = "images / thumb / 004.jpg"> <img src = "images / thumb / 004.jpg" /> </a> </li> <li> <a href = "images / complet / 004.jpg"> <img src = "images / thumb / 004.jpg" /> </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 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 = "Thumb / 009.jpg" /> </a> </ <li> 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> 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> 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> 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> </a> <li> <a href = "images / full / 018.jpg"> <img src = "images / thumb / 018.jpg" /> </a> </li> </ul>
La partie JS appelle ce plugin comme mentionné dans la démo
(fonction (fenêtre, photoswipe) {document.adDeventListener ('DomContentloaded', function () {var options = {}, instance = photoswipe.attach (window.document.QuerySelectorall ('# galerie a'), options);}, false);} (fenêtre, fenêtre.code.photoswipe));Vous pouvez également utiliser: $ ("# galerie a"). Photoswipe ();
Si la pièce HTML doit avoir un format spécial, il peut être appelé de la manière suivante:
1. Déclarer les variables globales: var Photoswipe_instance = 0;
2. Pour les éléments qui doivent entrer dans l'aperçu, le contenu est le suivant:
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. Trouvez Initialize dans Photoswipe.cache.cacheclass: fonction (images, options) {var i, j, cacheMage, image, src, légende, métadonnées; this.settings = options; this.images = []; pour (i = 0, j = images.length; i <j; i ++) {image = images [i]; // src = this.settings.getImagesource (image); // code d'origine - où le changement src = image.url; // new code - où la légende de changement = this.settings.getImageCaption (image); métadonnées = this.settings.getImageMetAdata (image); this.images.push (new Photoswipe.image.imageclass (image, src, légende, métadonnées)); }},De plus, il y avait un problème avec le plug-in et il était nécessaire de faire les modifications suivantes:
Trouver Photoswipe.Documentoverlay.DocumentOverlayClass (il y avait à l'origine un problème avec le positionnement et la hauteur du calque flottant d'arrière-plan ici)
ResetPosition: function () {Var Largeur, hauteur, haut; if (this.settings.target === fenêtre) {width = util.dom.windowWidth (); // height = util.dom.bodyouterheight () * 2; // Cela couvre la hauteur supplémentaire ajoutée par Photoswipe // Old Code - Change Hight = util.dom.bodyouterHeight (); // nouveau code - lieu de changement // top = (this.settings.jQueryMobile)? Util.dom.windowscrolltop () + 'px': '0px'; // ancien code - où les modifications sont top = util.dom.windowscrolltop () + 'px'; // nouveau code - où les modifications sont if (hauteur <1) {height = this.InitialBodyHeight; } if (util.dom.windowHeight ()> height) {height = util.dom.windowHeight (); }} else {width = util.dom.width (this.settings.target); height = util.dom.height (this.settings.target); top = '0px'; } Util.dom.setStyle (this.el, {largeur: largeur, hauteur: hauteur, haut: top}); },Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.