Regardons d'abord quelques rendus:
Cliquez sur l'une des photos pour agrandir, qui peut prendre en charge la description du texte de l'image:
Fonction de partage de support:
Soutenir l'élargissement des gestes et zoomer
L'utilisation du cadre JS est Photoswipe.
Photoswipe est un plug-in d'élargissement d'image, compatible avec PC et les terminaux mobiles. Il a connu plusieurs versions et a été constamment mis à jour. Il a d'innombrables pièges et présente d'énormes avantages sur les terminaux mobiles.
1. Peut contrôler une variété de styles tels que:
Titre, partage, boutons en plein écran, événement de clic, que ce soit pour ajouter des sous-titres, un arrière-plan transparent, etc.
2. Il peut prendre en charge les gestes tactiles mobiles compatibles avec PC Terminal
Tous les gestes de base prennent en charge: faites glisser le prochain ou le prochain, glisser, zoom, zoom ou fermer, cliquez pour basculer les commandes et double-cliquez pour zoomer ou zoomer.
3. Partager
L'interface utilisateur par défaut a un bouton pour partager le lien. Les liens par défaut sont Facebook, Twitter et Pinterest, mais vous pouvez définir le type de partage via l'API.
4. Interface utilisateur
L'interface utilisateur est complètement séparée du script de base. L'interface peut être complètement personnalisée. L'interface utilisateur par défaut de Photoswipe est réactive et peut être entièrement utilisée sur les ordinateurs de bureau, les tablettes et les appareils mobiles.
5. Plus de fonctions attendent que vous découvriez.
Site officiel: http://photoswipe.com/
github: https://github.com/dimsemenov/photoswipe
1. Téléchargez Photoswipe sur le site officiel et présentez-le sur la page
<link rel = "stylesheet prefetch" href = "css / photoswipe.css"> <link rel = "Stylesheet prefetch" href = "css / default-skin / default-skin.css"> <script src = "js / photoswipe.js"> </ script> < src = "JS / Photoswipe-Ui-Default.min.js"> </ Script>
2. La structure de code suivante doit être ajoutée à la page (cette structure est le code requis pour la navigation sur les images de plug-in. L'auteur n'a pas intégré à JS, donc l'utilisateur doit l'ajouter manuellement à sa propre page Web):
<! - Élément racine de Photoswipe. Doit avoir la classe PSWP. -> <div tabindex = "- 1" role = "Dialog" aria-hidden = "true"> <! - arrière-plan de Photoswipe. C'est un élément distinct car l'animation d'opacité est plus rapide que RGBA (). -> <div> </div> <! - glisse Wrapper avec débordement: caché. -> <div> <! - conteneur qui contient des diapositives. Photoswipe n'en garde que 3 dans le DOM pour enregistrer la mémoire. Ne modifiez pas ces 3 éléments PSWP__item, les données sont ajoutées plus tard. -> <div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> </div> <! - Par défaut (Photoswipeui_default) Interface au-dessus de la zone coulissante. Peut être changé. -> <div> <div> <! - Les contrôles sont explicites. L'ordre peut être modifié. -> <div> </ div> <button> </ button> <fontificatrice> </ bouton> <! - L'élément obtiendra la classe PSWP__PRELOADER - lorsque Preloader est en cours d'exécution -> <v> <v> <v> </v> </v> </v> </ div> </ div> </ div> </ div> </ div> </ div> </ div> </ving <div> </div> </ div> </div> </div> <div> <div> </div> </div> </div> </div> </div> </div> </div>
3. Ajouter le code de structure Photoswipe aux images dont vous avez besoin pour parcourir. Ce à quoi vous devez faire attention ici, c'est
Data-PSWP-UID doit être unique dans chaque album. La taille des données est la largeur et la hauteur de l'image lors de l'élargissement. Si la largeur et la hauteur spécifiées ne correspondent pas à l'image, l'image affichée sera déformée. Il n'y a aucun moyen de supprimer la taille des données, mais si vous avez le temps, vous pouvez trouver une alternative.
<! - Data-PSWP-UID doit être unique dans chaque album. La taille des données spécifie la largeur et la hauteur de l'image lors du zoom dans -> <div data-pswp-uid = "1"> <stigué> <a href = "img / m3.jpg" data-size = "670x712"> <img src = "img / th1.jpg"> </a> </pigucial> </vc>
4. Ajouter du code JS. L'auteur de ce code n'a pas été intégré dans le cadre Photoswipe. Il doit l'ajouter manuellement à la page Web.
<script type = "text / javascript"> var initphotoswipefromdom = function (galeryselector) {// l'analyse des données de diapositive des éléments DOM (URL, titre, taille ...) // (enfants de GalerySelector) var parsethumbnaillements = fonction (el) {var thumbelements = el.childNodes, numNodes = thumbelements. taille, article; for (var i = 0; i <numnodes; i ++) {Figurel = thumbelements [i]; // <gigne> Element // Inclut uniquement les nœuds d'élément if (figureel.NodeType! == 1) {Continuer; } 25 linkel = figureel.children [0]; // <a> élément size = linkel.getAttribute ('data-size'). Split ('x'); // Créer un élément d'objet de diapositive = {src: linkel.getAttribute ('href'), w: parseInt (size [0], 10), h: parseInt (size [1], 10)}; if (figureel.children.length> 1) {// <Figcaption> Content item.title = Figureel.children [1] .InnerHtml; } if (linkel.children.length> 0) {// <img> nœud de miniatures, recherche d'url de vignette. } item.el = figureel; // Enregistrer l'élément de lien pour GetThumboundSfn items.push (item); } return items; }; // Trouvez le nœud parent le plus proche var plus proche = fonction le plus proche (el, fn) {return el && (fn (el)? El: le plus proche (el.parentNode, fn)); }; // Lorsque l'utilisateur clique sur la vignette, déclenchez var onthumbnailsclick = fonction (e) {e = e || window.event; E.PreventDefault? e.PreventDefault (): e.ReturnValue = false; var etarget = e.target || e.srcelement; // recherche l'élément racine de la diapositive var clickedListItem = le plus proche (Etarget, fonction (el) {return (el.tagname && el.tagname.touppercase () == «Figure ');}); if (! ClickedListItem) {return; } // Recherchez l'index de l'élément cliqué en faisant en boucle via tous les nœuds enfants // Alternativement, vous pouvez définir l'index via Data- Attribut var ClickEdGallery = ClickedListItem.ParentNode, ChildNodes = ClickNodes.Length, NodeIndex = 0, INDEX; pour (var i = 0; i <numChildNodes; i ++) {if (childNodes [i] .NodeType! == 1) {continuant; } if (childNodes [i] === ClickEdListItem) {index = nodeIndex; casser; } nodeIndex ++; } if (index> = 0) {// Ouvrir Photoswipe si un index valide a trouvé OpenThotoswipe (index, clicdGallery); } return false; }; // L'index d'image d'analyse et l'index de la galerie à partir de l'URL (# & pid = 1 & gid = 2) var PhotosWipeParseHash = function () {var hash = window.location.hash.substring (1), params = {}; if (hash.length <5) {return params; } var vars = hash.split ('&'); for (var i = 0; i <vars.length; i ++) {if (! vars [i]) {continuant; } var paire = vars [i] .split ('='); if (pair.length <2) {continue; } params [paire [0]] = paire [1]; } if (params.gid) {params.gid = parseInt (params.gid, 10); } return params; }; var openphotoswipe = function (index, galleryElement, DisableAniMation, fromUrl) {var pswPelement = document.QuerySelectorAll ('. PSWP') [0], galerie, options, articles; éléments = parsethumbnaillements (galerie); // Parameter options = { barsSize: { top: 100, bottom: 100 }, fullscreenEl : false, // Whether full screen button shareButtons is supported: [ {id:'wechat', label:'share WeChat', url:'#'}, {id:'weibo', label:'Sina Weibo', url:'#'}, {id:'download', label:'Save Photo ', URL:' {{Raw_image_url}} ', Télécharger: true}], // Button de partager // Définir l'index de la galerie (pour URL) GalleryUID: galenceelement.getAttribute (' Data-Pswp-Uid '), GetThumboundSfn: Fondat) {// voir des options -> GetThumboundsfn section de documentation pour plus d'infos = Éléments [index] .el.getElementsByTagName ('img') [0], // Recherchez la vignette pageyscroll = window.pageyoffset || document.DocumentElement.ScrollTop, rect = Thumbnail.GetBoundingClientRect (); return {x: rect.left, y: rect.top + pageyscroll, w: rect.width}; }}; // Photoswipe a ouvert à partir de l'URL if (fromUrl) {if (options.gallerypids) {// parse réel index lorsque les pids personnalisés sont utilisés pour (var j = 0; j <itels.length; j ++) {if (items [j] .pid == index) {options.index = j; casser; }}} else {// Dans les index d'URL démarrer à partir de 1 options.index = parseInt (index, 10) - 1; }} else {options.index = parseInt (index, 10); } // quitter si index non trouvé if (isnan (options.index)) {return; } if (DisableAnIMation) {Options.ShowanimationDuration = 0; } // transmettez des données à Photoswipe et initialisez la galerie = new Photoswipe (PSWPelement, Photoswipeui_default, éléments, options); galerie.init (); }; // Loop à travers tous les éléments de la galerie et les événements de liaison var galeriements = document.QuerySelectorAll (GalerySelector); for (var i = 0, l = galenkeelements.length; i <l; i ++) {galences [i] .setAttribute ('data-pswp-uid', i + 1); GalenkElements [i] .OnClick = onThumbnailsClick; } // Parse URL et galerie ouverte si elle contient # & pid = 3 & gid = 1 var hashdata = PhotosWipeParseHash (); if (hashdata.pid && hashdata.gid) {openphotoswipe (hashdata.pid, galences [hashdata.gid - 1], true, true); }}; // Exécuter la fonction ci-dessus initphotoswipeFromdom ('. My-gallery'); </cript>Cet article a été compilé dans "Résumé des compétences de développement de JavaScript WeChat", et tout le monde est le bienvenu pour apprendre et lire.
Je voudrais recommander un didacticiel sur le programme WECHAT MINI qui est fortement inquiet: "WECHAT Mini Program Development Tutorial" a été soigneusement compilé par le rédacteur en chef de tout le monde, j'espère que vous l'aimez.
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.