Share
Je suis récemment tombé sur une bibliothèque JavaScript appelée PhotoSwipe et je suis vraiment impressionnée. C’est une bibliothèque brillante qui superpose une image ou un groupe d’images sur votre page actuelle, un effet communément appelé boite à lumière. PhotoSwipe est actuellement développé par Dmitry Semenov. Il l'a reconstruit l'année dernière lorsqu'il a repris le projet. Les améliorations comprennent:
Le seul inconvénient est que PhotoSwipe ne manquera pas de place. Comme l'indique le développeur:
«PhotoSwipe est simple et rapide pour les utilisateurs finaux, pas pour les développeurs. Ce n'est pas un simple plugin jQuery, au moins des connaissances de base de JavaScript sont nécessaires pour installer.
Mais il peut être utilisé conjointement avec d'autres bibliothèques. Dans ce didacticiel, nous allons voir comment utiliser PhotoSwipe avec jQuery. Nous ferons en sorte que tout le processus soit compréhensible, même si vous n'êtes pas familiarisé avec le JavaScript pur.
Commençons.
Nous commencerons par:
Accentsconagua
photoswipe.min.js, photoswipe-ui-default.min.js (le code qui construit l'interface utilisateur de PhotoSwipe), default-skin.css, default-skin.png, default-skin.svg, etpreloader.gif.La structure HTML est la partie la plus essentielle car elle déterminera éventuellement la manière dont nous écrivons le code JavaScript. Ici, nous supposerons que nous avons quelques images, comme suit:
Outre les attributs de classe et de schéma (ce qui facilitera le référencement), nous avons également ajouté un Les données-* attribut dans la balise d'ancrage qui enveloppe l'image. Ceci stocke la taille complète (largeur x hauteur) de l'image.
Nous ajoutons maintenant le balisage que PhotoSwipe utilisera pour superposer les images complètes. Ajouter ceci juste avant la balise de fermeture,
Nous sommes tous configurés avec le code HTML, nous pouvons donc maintenant utiliser le code JavaScript. Comme mentionné, nous utiliserons jQuery.
Nos images sont regroupées dans un div avec le image classe. Il peut y avoir plusieurs groupes d’images dans la page, c’est pourquoi nous les parcourons en boucle. .image élément.
$ ('.image'). chaque (fonction () ); PhotoSwipe nécessite que nous fournissions la source d'image complète avec sa taille. Pour nous en occuper, nous créons une fonction qui va parcourir la balise anchor pour récupérer ces détails, comme suit:
$ ('.image'). each (fonction () var $ pic = $ (ceci), getItems = fonction () var items = []; $ pic.find ('a'). each (fonction () var $ href = $ (this) .attr ('href'), $ size = $ (this) .data ('size'). split ('x'), $ width = $ size [0], $ height = $ size [1]; var item = src: $ href, w: $ width, h: $ height items.push (item);); return items; var items = getItems ();); Divisons le code ci-dessous en plusieurs parties:
éléments = []..chaque() méthode.$ href = $ (this) .attr ('href') obtient la valeur dans le href attribut, stockant le chemin de l'image complète.$ taille = $ (ceci) .data ('taille'). split ('x') obtiendra la valeur de la taille de données attribuer à travers le jQuery .Les données() méthode. Nous utilisons ensuite le la Divisé()méthode pour séparer la valeur.$ width = $ size [0] et $ hauteur = $ taille [1].pousser() méthode, nous recueillons toutes ces informations dans un tableau.Nous avons maintenant la source d'image et la taille de l'image stockée dans le articles variable. Pour vérifier, vous pouvez exécuter la variable via le console.log () et vous devriez trouver la structure de données suivante dans les DevTools.
Ensuite, nous lions le figure élément avec le Cliquez sur événement, créez une instance PhotoSwipe, transmettez le articles avec les options de configuration et enfin initialiser PhotoSwipe.
var $ pswp = $ ('. pswp') [0]; $ pic.on ('clic', 'figure', fonction (événement) événement.preventDefault (); var $ index = $ (ceci) .index (); var options = index: $ index, bgOpacity: 0.7, showHideOpacity: true // Initialise PhotoSwipe var lightBox = new PhotoSwipe ($ pswp, PhotoSwipeUI_Default, éléments, options); lightBox.init ();); La raison pour laquelle nous utilisons le figure l’élément sur lequel cliquer, plutôt que la balise anchor, permet de récupérer facilement l’index (ou l’ordre suivant). Cela nous permet d’informer PhotoSwipe du bon index pour superposer l’image correspondante..
Nous venons d'implémenter PhotoSwipe en utilisant jQuery. Le code est comparativement plus fin et plus facile à comprendre que lorsqu'il est écrit en JavaScript vanille.
Maintenant que vous avez démarré, vous pouvez également ajuster PhotoSwipe à l’aide d’une poignée d’options fournies et même précharger l’image afin de voir l’image complète instantanément en cliquant dessus. Je laisserai les styles à votre imagination puisqu'il n'y a pas de règles strictes pour ceux.
J'espère que vous avez appris quelque chose de ce tutoriel et que vous le trouvez utile parfois. N'oubliez pas de regarder la démo en direct et de laisser des questions ou des pensées dans les commentaires!
