Explication détaillée de l'utilisation du plug-in jQuery Magnify

Cette fois, je vous apporte une explication détaillée de l'utilisation du plug-in jQuery Magnify. Quelles sont les précautions lors de l'utilisation du plug-in jQuery Magnify. Voici des cas pratiques, jetons un coup d'œil. .

En raison de besoins professionnels particuliers, après plus d'un mois de dormance et de réflexion, j'ai développé ce plug-in de visionneuse d'images jQuery Magnify, qui implémente Windows Toutes les fonctions de la visionneuse de photos, telles que le glisser, le redimensionnement et l'agrandissement de la fenêtre modale, le zoom, la rotation, le panoramique et le contrôle du clavier de l'image, etc. Les styles de plug-ins sont tous basiques css, il est très facile à personnaliser et vous pouvez facilement le modifier selon votre style préféré. React et Vue seront publiés plus tard. Versions pertinentes des plugins. Cet article présente principalement les caractéristiques et l'utilisation des plug-ins, et les détails sur le développement de plug-ins seront expliqués dans les articles spécifiques suivants.

En raison de mon emploi du temps chargé ces derniers temps, je rentre à la maison à dix heures du soir presque tous les jours, puis je commence à écrire des plug-ins. Il est déjà minuit passé quand je me couche, et maintenant je suis épuisé physiquement et. mentalement. Comme aucun plug-in pertinent n'a été trouvé, je me suis creusé la tête et j'ai réfléchi indépendamment à de nombreuses questions, telles que la mise à l'échelle des images avec la souris comme centre, les restrictions sur le mouvement de l'image lors du changement de la taille de la fenêtre contextuelle, la mise à l'échelle et le panoramique après rotation de l'image, etc. Lors du développement de plug-ins La chose la plus gênante, ce sont les détails, même la plupart du temps est consacré à la réparation d'une seule fonction. bogue.

De plus, la plus grande difficulté dans le développement de plug-ins n'est pas la mise en œuvre des fonctions, mais la manière de concevoir le plug-in et de rendre son utilisation plus facile et plus pratique. La manière de concevoir des plug-ins n'est pas le sujet de cet article. J'écrirai plus tard un article spécial présentant les idées de conception de plug-ins.

Presque tout le code du plug-in ajuste la largeur, la hauteur, la gauche et le haut de la fenêtre contextuelle ou de l'image, le problème de compatibilité n'est donc pas grave. Il s'agit principalement d'un problème de rotation 2D et inférieur. utilisez des filtres pour y parvenir. Afin de faciliter l'ajustement des styles, il existe de nombreux calculs de positions relatives.

Magnify est écrit en fichiers séparés et empaqueté à l'aide de plug-ins npm. Il n'utilise pas de nouvelle syntaxe ni d'outils d'empaquetage populaires. L'utilisation de l'outil npm est devenue une tendance dans le développement de projets et le packaging pour la publication.

Démo

Si vous ne souhaitez pas cliquer sur l'URL pour voir l'exemple, vous pouvez visualiser l'effet du plug-in via le CodePen suivant. Il n'y a aucune différence entre les deux méthodes sauf la taille de la fenêtre :

. Si vous ne pouvez pas ouvrir CodePen en raison de la vitesse du réseau ou pour d'autres raisons, vous pouvez voir la démonstration d'image ci-dessous.

Fonctions principales

Les fonctions de Magnify peuvent être comparées à Windows Photo Viewer, qui complète essentiellement toutes les fonctions pouvant être obtenues.

1. Glissement de la fenêtre modale

Si la taille de l'image n'est pas plus grande que la zone d'affichage, la fenêtre contextuelle peut également être glissée dans la zone d'affichage de l'image. C'est la même chose que la visionneuse d'images QQ.

2. Redimensionnement de la fenêtre modale

Il y a un petit bug dans le redimensionnement actuel, mais cela n'affecte pas l'utilisation globale.

3. Maximisez la fenêtre modale

En plus de la maximisation des fenêtres contextuelles, une fonction de minimisation a également été conçue dès les premiers stades du développement, mais elle semblait un peu insipide, elle n'a donc pas encore été ajoutée.

4. Mise à l'échelle de l'image

Peut être utilisé via la molette de la souris, les boutons, le clavier, etc.

5. Rotation des images

La fonction actuelle de rotation d'image n'a pas ajouté de code pour prendre en charge les versions inférieures à IE9.

6. Contrôle du clavier

Les boutons pour Magnify et Windows Photo Viewer sont les mêmes

← Précédent → Suivant + Zoom avant - Zoom arrière ctrl + alt + 0 Taille réelle ctrl + , Rotation à gauche ctrl + . Rotation à droite 7. Affichage plein écran

L'affichage plein écran de Magnify n'implémente que les fonctions d'affichage de base et n'implémente pas encore la rotation automatique des diapositives. Utilisez le clavier pour contrôler les images dans un environnement plein écran.

Comment utiliser

L'utilisation de Magnify n'est pas différente de celle de la plupart des autres plug-ins lightbox. Si vous avez l'habitude d'utiliser d'autres plug-ins, il n'y aura aucun obstacle à l'utilisation de Magnify.

1. Fichiers qui doivent être référencés par

<link href="/path/to/magnify.css" rel="external nofollow" rel="stylesheet">
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.magnify.js"></script>

Magnify utilise l'icône font-awesome par défaut, vous devez donc référencer le CSS font-awesome document. Si vous souhaitez utiliser d'autres icônes, vous pouvez modifier le paramètre icônes des options. Dans une version ultérieure, je pourrai ajouter un fichier d'icône de police personnalisé ou utiliser SVG icône.

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="external nofollow" rel="stylesheet">

2.Structure HTML

Magnify utilise la structure suivante par défaut. Cette structure peut être traitée pour des raisons de compatibilité et est également la structure utilisée par la plupart des lightbox.

<a data-magnify="gallery" href="big-1.jpg" rel="external nofollow" >
 <img src="small-1.jpg">
</a>
<a data-magnify="gallery" href="big-2.jpg" rel="external nofollow" >
 <img src="small-2.jpg">
</a>
<a data-magnify="gallery" href="big-3.jpg" rel="external nofollow" >
 <img src="small-3.jpg">
</a>

Vous pouvez également utiliser la structure plus concise suivante

<img data-magnify="gallery" src="big-1.jpg" src="small-1.jpg">
<img data-magnify="gallery" src="big-2.jpg" src="small-2.jpg">
<img data-magnify="gallery" src="big-3.jpg" src="small-3.jpg">

La structure HTML de Magnify contient les options suivantes

Ajoutez l'attribut src pour créer un lien vers l'image plus grande. S'il est utilisé dans une balise <a>, il remplace la valeur de l'attribut href. Ajoutez l'attribut data-caption pour afficher le titre. Si vous n'utilisez pas cet attribut, le plugin affichera le nom de l'image dans l'URL. Ajoutez l'attribut data-group pour regrouper les images. 3.Initialiser le plug-in

Si vous ajoutez l'attribut data-magnify en HTML, le plugin sera initialisé automatiquement.

La méthode d'initialisation manuelle du plug-in est la même que pour tous les plug-ins jQuery :

$('[data-magnify=gallery]').magnify(options);

Configuration des paramètres

options = {
  draggable: true,
  resizable: true,
  movable: true,
  keyboard: true,
  title: true,
  modalWidth: 320,
  modalHeight: 320,
  fixedContent: true,
  fixedModalSize: false,
  initMaximized: false,
  gapThreshold: 0.02,
  ratioThreshold: 0.1,
  minRatio: 0.1,
  maxRatio: 16,
  headToolbar: [
   'maximize',
   'close'
  ],
  footToolbar: [
   'zoomIn',
   'zoomOut',
   'prev',
   'fullscreen',
   'next',
   'actualSize',
   'rotateRight'
  ],
  icons: {
   maximize: 'fa fa-window-maximize',
   close: 'fa fa-close',
   zoomIn: 'fa fa-search-plus',
   zoomOut: 'fa fa-search-minus',
   prev: 'fa fa-arrow-left',
   next: 'fa fa-arrow-right',
   fullscreen: 'fa fa-photo',
   actualSize: 'fa fa-arrows-alt',
   rotateLeft: 'fa fa-rotate-left',
   rotateRight: 'fa fa-rotate-right'
  }
}

Concernant la signification spécifique des paramètres du plug-in, je ne les copierai pas et ne les collerai pas ici. Veuillez vous référer à la documentation officielle pour des instructions détaillées. Si vous avez des questions, vous pouvez laisser un message ici.

Style personnalisé

Le style du plug-in étant relativement simple, il est également très facile à modifier. En plus de la visionneuse de photos Windows, la visionneuse d'images de QQ est également très avancée. Nous pouvons obtenir l'effet de la visionneuse d'images QQ avec de simples modifications, mais certaines fonctions telles que Vignettes n'ont pas encore été implémentées. Ce qui suit est une démonstration en direct :

Faire face à une telle visionneuse d'images est rafraîchissant ~

Résumé

À l'heure actuelle, le plug-in dans son ensemble a été perfectionné, mais il reste encore de nombreux détails à modifier et à ajouter, notamment le support des terminaux mobiles You can star. Restez à l'écoute des mises à jour sur le projet. Je n'entrerai pas dans les détails de l'introduction du plug-in. Si vous trouvez un bug, Si vous avez de meilleures suggestions, vous pouvez poser des questions sur GitHub ou laisser un message ici. Votre soutien est ma plus grande motivation pour aller de l'avant ! Si ce plug-in vous est utile ou si vous utilisez ce plug-in dans votre projet, veuillez laisser un message pour nous le faire savoir !

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Utilisez JS pour rendre la fonction de renvoi du code de vérification après 60 secondes

JS implémenté sur le côté mobile Fonction de pagination à chargement illimité

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!