Photoswipe.js Site officiel: http://photoswipe.com/, les fichiers Photoswipe et les exemples connexes peuvent être téléchargés sur ce site.
Ce composant est principalement utilisé pour afficher des images et des albums, et est très pratique.
1. L'utilisation de ce composant nécessite deux fichiers JS
1 <script type = "text / javascript" src = "simple-héritage.min.js">
2 <Script Type = "Text / JavaScript" src = "Code-Photoswipe-1.0.11.min.js"> <! - La dernière version actuelle devrait être 1.0.11 ->
2. Ensuite, la structure de la page peut être comme ça
<div id="Gallery"> <div> <div><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" /></a></div> <div><a href="images/full/02.jpg"><img src="images/full/02.jpg" /></a></div> <div><a href = "images / full / 04.jpg"> <img src = "images / full / 04.jpg"> <img src = "images / full / 04.jpg"> <img src = "images / thumb / 04.jpg" /> </a> </ div> <v> <a href = "images / full / 05.jpg"> <ampg src = "images / thumb / 05.jpg" /> </a> </ div> <div> <a href = "images / full / 06.jpg"> <img src = "images / thumb / 06.jpg" /> </a> </ div> </ div> </ div>
En fait, en plus de la structure de la page, les seules choses qui sont vraiment utiles dans ce code HTML sont id = "galerie" et <a href = "Image Path"> </a> (il sera expliqué plus tard). L'autre classe ne joue qu'un rôle dans l'embellissement de la structure de la page d'origine (différente de la page que vous souhaitez vraiment avoir l'effet, c'est-à-dire que vous devez simplement taper en fonction de la structure de la page ci-dessus, et l'effet de la page que vous souhaitez est complété par le plugin JS lui-même, et vous n'avez pas besoin d'écrire la disposition des effets).
La page nécessite à la fois JS et la structure de la page, et ce qui suit consiste à utiliser le plug-in.
3. Vous pouvez utiliser deux façons pour déclarer le plug-in
1. Cela se fait en ajoutantEventListener () dans le navigateur par défaut.
Document.AddeventListener ("DomConTentloaded", function () {code.photoswipe ('a', '# galerie'); // Cela implique la structure ID = "Galler à}, false);2. Comment utiliser jQuery:
$ (document) .ready (function () {$ ("# galerie a"). Photoswipe ();});4. Avec ce paramètre, votre page sera probablement comme ça.
L'effet de la page au début:
Après avoir cliqué sur n'importe quelle image, le formulaire de la page devient comme suit (cette page est en fait la page que je veux vraiment):
Vous pouvez clairement voir le contenu dans Alt dans <img /> au-dessus de la page, et il y aura quatre boutons ci-dessous, représentant: fermez la page et retournez à l'apparence d'origine (c'est-à-dire l'image ci-dessus), la lecture automatique, l'image de la page précédente et l'image de la page suivante.
L'effet d'un tel album apparaît. Bien sûr, vous pouvez utiliser la souris pour glisser à gauche et à droite sur cette page. Si vous êtes sur un appareil portable, vous pouvez également glisser à gauche et à droite sur votre doigt.
Ce plugin possède de nombreuses propriétés:
AllowUserZoom: permet aux utilisateurs de double-cliquer pour afficher les images en zoomant / bouge. Valeur par défaut = True
AutoStartslideshow: Lorsque Photoswipe est activé, le diaporama sera automatiquement joué. Valeur par défaut = false
AllowRotationOnUserZoom: Seule pris en charge par iOS - permet aux utilisateurs de faire pivoter des images avec des gestes en mode zoom / pan. Par défaut = false
BackbuttonHideenabled: Appuyez sur la touche de retour pour masquer les diapositives de l'album. Il est principalement utilisé par Android et BlackBerry. Prend en charge BB6, Android V2.1, iOS 4 et les versions plus récentes. Valeur par défaut = True
LégendeAndToolBarAutoHideDelay: Le temps de retard caché automatiquement par la barre de titre et la barre d'outils. La valeur par défaut est = 5000 (ms). S'il est réglé sur 0, il ne sera pas caché automatiquement (appuyez sur / cliquez pour changer de visible et masqué)
LégendeAndToolBarflippOSITION: Position de bascule entre la barre de titre et la barre d'outils (Laissez-vous être affiché en bas et la barre d'outils s'affiche en haut). Valeur par défaut = false
LégendeAndToolBarHide: Masquer la barre de titre et la barre d'outils. Valeur par défaut = false
LégendeAndToolBaropacity: Transparence de la barre de titre et de la barre d'outils (0-1). Valeur par défaut = 0,8
LégendeAndToolBarshowEmpTyCaptions: Affiche la barre de titre même si le titre de l'image actuelle est vide. Valeur par défaut = True
cachemode: mode cache, code.photoswipe.cache.mode.normal (par défaut, normal) ou code.photoswipe.cache.mode.aggressif (radical, actif). Décide comment Photoswipe gère le cache d'image du cache.
Le mode agressif définira activement le type d'images non "actuelles, précédentes, suivantes" vides. Il sera utile pour les débordements de mémoire dans les navigateurs iOS plus anciens. Dans la plupart des cas, le mode normal est OK.
DoubleTapspeed: l'intervalle maximal pour le double clic. Valeur par défaut = 300 (ms)
DoubleTapZoomlevel: Lorsque l'utilisateur double-cliquez, le multiplicité de grossissement est le niveau de "zoom-in" par défaut. Valeur par défaut = 2,5
ENTIVEDRAG: permet de faire glisser l'image précédente / suivante vers l'interface actuelle. Valeur par défaut = True
EnableKeyboard: Autoriser les opérations du clavier (commutation de flèche gauche et gauche, sortie ESC, entrez la lecture automatique, affichage de la barre d'espace / barre de titre caché / sortie). Par défaut = true
ImmatingEmousewheel: permet le fonctionnement de la roue de souris. Par défaut = true
FadeinSpeed: la vitesse (durée) de l'élément d'effet, millisecondes. Par défaut = 250
FadeoutSpeed: la vitesse (durée) de l'élément d'effet, millisecondes. Par défaut = 250
ImagesCaleMethod: Méthode de mise à l'échelle de l'image (mode). Valeurs facultatives: "Fit", "FitnousCale" et "Zoom". Le mode "ajustement" garantit que l'image s'adapte à l'écran. "FitnousCale" est similaire à "Fit" mais n'élargit pas l'image. "Zoom" sera criblé l'image en entier, mais il est possible que la mise à l'échelle de l'image ne soit pas également proportionnelle. Default = "fit"
Invertmouse-Wheel: inversez la roue de la souris. Par défaut, le défilement vers le bas de la souris passera à l'image suivante et jusqu'à l'image précédente. Par défaut = false
JQueryMobile: indique si Photoswipe est intégré dans le projet mobile jQuery. Par défaut, Photoswipe essaiera de résoudre ce problème pour vous
JQueryMobileDialoghash: la balise de hachage de JQuery Mobile utilisée pour les pages de fenêtre et de dialogue. Valeur par défaut = "& ui-state = Dialog"
LOOP: Si l'album boucle automatiquement. Par défaut = true
Marge: l'intervalle entre deux images, l'unité est des pixels. Par défaut = 20
Maxuserzoom: grossissement maximum. Par défaut = 5.0 (défini sur 0 sera ignoré)
MINUSERZOOM: Le plus petit multiple de réduction de l'image. Par défaut = 0,5 (réglé sur 0 sera ignoré)
Souris Wheelspeed: Sensibilité en réponse à la roue de la souris. Par défaut = 500 (ms)
NextPreviousSlidespeed: combien de millisecondes seront retardées après avoir cliqué sur les boutons précédents et suivants. Par défaut = 0 (commutateur maintenant)
Prévention: empêche l'utilisateur de fermer Photoswipe. Il masquera également le bouton "Fermer" dans la barre d'outils. Utilisez-le sur la page exclusive (l'exemple est des exemples / 08-exclusive-mode.html dans le code source). Par défaut = false
Empêche le plan de dose: bloque le mode de lecture automatique. Il masquera également le bouton de lecture dans la barre d'outils. Par défaut = false
SlideShowDelay: Combien de temps faut-il pour lire l'image suivante en mode jeu automatique? Par défaut = 3000 (ms)
Slidepeed: le temps de l'image glisse dans la vue. Par défaut = 250 (ms)
Slipethreshold: combien de pixels sont utilisés pour glisser un doigt pour déclencher un événement de geste de balayage. Par défaut = 50
Swipetimethreshold: définit le nombre maximal de millisecondes pour déclencher le geste de balayage. S'il est trop lent, il ne déclenchera pas la diapositive et ne fera que faire glisser la position de la photo actuelle. Par défaut = 250
SlidetimingFunction: Fonction d'assouplissement lors du glissement. Default = "faciliter"
Zindex: la valeur zindex initiale. Par défaut = 1000
activeruiwebViewRepositionTimeout: vérifie si l'orientation de l'appareil a changé. Par défaut = false
uiwebViewReSetPositionDelay: Le temps pour vérifier si la direction de l'appareil change régulièrement est de 500 (MS)
empêcherDefaultTouchevents: bloque les événements tactiles par défaut, tels que le défilement de la page. Par défaut = true
cible: doit être un élément DOM légal (tel que div). La par défaut est la fenêtre (pleine page). S'il s'agit d'un DOM de bas niveau, il sera affiché dans le DOM et peut ne pas être plein écran.
Si vous n'avez pas besoin d'afficher la première page et d'afficher directement la deuxième page, vous pouvez le définir comme ceci:
$ (document) .ready (function () {// configurer Photoswipe, réglant "empêcher: vrai" var thumbels = code.photoswipe ('a', '#gallery', {empêché: true}); code.photoswipe.current.show (0);});Bien sûr, ce plugin a de nombreuses autres fonctions d'écoute:
Document.AddeventListener ('DomContentOaded', function () {// onBefoRshow Appelez cette méthode avant que la galerie ne soit sur le point d'être affiché.code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onbeforesh, function (e) {console.log ("onBeforeshow"); Code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.Oneshow, fonction (e) {console.log ("onBefoHow");}); console.log ("OnShow");}); Code.photoswipe.current.addeventListener (code.photoswipe.eventypes.onhide, fonction (e) {console.log ('onhide');}); Console.log ('OnShownExt');}); Code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.ondisplayimage, fonction (e) {console.log ('onDisplayImage');}); Code.Photoswipe.current.addeventListener (code.photoswipe.eventtypes.onresetposition, fonction (e) {console.log ('onreSetPosition');}); SlideShowCode.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onslideshowstart, fonction (e) {console.log ('onSlideshowStart');}); Code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onslideshowstop, fonction (e) {console.log ('onSlideshowstop');}); Code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onbeForcattionAndToolBarshow, fonction (e) {console.log ('onBeForecaptionAndToolBarShow');}); Code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onbeForctionandToolBarHide, fonction (e) {console.log ('onBeForecaptionAndToolbarHide');}); OnBeForCaptionandToolBarHide déclenchera généralement ONBEFORICAPTIONALDTOOLBARHIDE ou ONBEFORYAPITIONALDTOOLBARHIDE MÉTHODE Code.Photoswipe.current.AddeventListener (Code.Photoswipe.eventTypes.onViewportClick, fonction (e) {console.log ('sur surÉtant donné que la méthode d'appel de l'interface API ne se trouve pas sur le site officiel de Photoswipe et que le niveau actuel de JS n'est pas très bon, certaines de ses interfaces API ne sont essentiellement pas bien comprises. Cependant, lorsque j'ai vérifié son exemple, j'ai constaté qu'une variable apparaît souvent, code.photoswipe ou code.photoswipe.current. Tous ont été effectués dans la console. Lorsque j'ai entré Code.photoswipe, le contenu suivant est apparu:
Bien que vous ne puissiez pas comprendre pleinement ce que c'est, vous pouvez voir que l'élément actuel est inclus. Entrez ensuite code.photoswipe.current dans la console pour obtenir le contenu suivant:
Vous pouvez trouver plus d'informations ici, par exemple: CurrentIndex indique que l'image actuelle est indexée dans la liste, et la connexion entière est code.photoswipe.current.currentIndex représente la position indexée de l'image actuelle. Ces informations sont très importantes pour moi. Nous pouvons afficher différentes informations de page sur différentes pages via ces informations.
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.