PhotoSwipe

Introduction

PhotoSwipe est une bibliothèque basée sur un plugin JQuery permettant de réaliser, avec quelques notions de JavaScript, des galeries photo. Cette bibliothèque à pour avantage qu'elle est autosuffisante et ne nécessite pas d'autres bibliothèques pour fonctionner

Installation

Fichiers à télécharger

Les fichiers à télécharger à inclure dans les dossier sont stockés dans un dossier GitHub. Ils doivent impérativement être présents sur dans l'arborescence du site afin que la galerie PhotoSwipe puisse fonctionner.

Utilisation

Liens à ajouter dans la page HTML

Voici comment doivent être inclus les fichiers JS et CSS afin que la galerie fonctionne

<!-- Core CSS file -->
<link rel="stylesheet" href="path/to/photoswipe.css"> 

<!-- Skin CSS file (styling of UI - buttons, caption, etc.)
     In the folder of skin CSS file there are also:
     - .png and .svg icons sprite, 
     - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="path/to/default-skin/default-skin.css">

<!-- Core JS file -->
<script src="path/to/photoswipe.min.js"></script> 

<!-- UI JS file -->
<script src="path/to/photoswipe-ui-default.min.js"></script>

Implémentation de la galerie en HTML

L'implémentation de la galerie au niveau du HTML n'est pas très complexe. Elle laisse la possibilité de modifier un certain nombre de paramètres, commentés dans le code ci-dessous. A noter que certaines parties ne doivent absolument pas être modifiées pour le bon fonctionnement du programme, alors que d'autre peuvent l'être mais nécessitent un certain niveau d'expertise.

<!-- Boutton permettant de lancer la galerie photo -->
<button id="btn">Ouvrir PhotoSwipe</button>
<!-- Element de base pour le fonctionnement de PhotoSwipe. 
     doit absoluement avoir la class="pswp". Ne pas modifier -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <!-- Background de PhotoSwipe. Ne pas modifier -->
  <div class="pswp__bg"></div>
  <!-- Couverture des slides. Ne pas modifier -->
  <div class="pswp__scroll-wrap">
    <!-- div qui contiennent les pages de la galerie. 
		PhotoSwipe en garde seulement 3 dans le DOM pour ne pas utiliser trop de mémoire
		Ne pas modifier. -->
    <div class="pswp__container">
      <!-- Ne pas modifier ces 3 élement spswp__item , c'est sur cette base que seront ajouté les données -->
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>

    <!-- Interface par défaut au dessus de la galerie. Peut être modifié (utilisateurs expérimenté). -->
    <div class="pswp__ui pswp__ui--hidden">
      <div class="pswp__top-bar">
        <!--  Controles de la galerie. l'ordre peut être changé -->
        <div class="pswp__counter"></div>
        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> <!-- Fermeture -->
        <button class="pswp__button pswp__button--share" title="Share"></button> <!-- Partage -->
        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button> <!-- Plein écran -->
        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button> <!-- Zoom -->
        <div class="pswp__preloader">
          <div class="pswp__preloader__icn">
            <div class="pswp__preloader__cut">
              <div class="pswp__preloader__donut"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
        <div class="pswp__share-tooltip"></div>
      </div>
	  
	  <!-- Flèche pour passer à la photo précédente -->
      <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button>
	  <!-- Flèche pour passer à la photo Suivante -->
      <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button>

      <div class="pswp__caption">
        <div class="pswp__caption__center"></div>
      </div>

    </div>
  </div>
</div>

Code javascript associé

La fonction openPhotoSwipe() appelée via le bouton "Ouvrir PhotoSwipe" dans le code HTML va être présentée dans cette section. C'est dans le code JavaScript que les images devant être affichées dans la galerie vont être implémentées. La galerie se présente sous la forme d'un array, dans lequel chaque objet contient l'URL de l'image, sa hauteur et sa largeur. Un second array comporte des options qui peuvent être modifiées, commentées dans le code.

var openPhotoSwipe = function() {
    var pswpElement = document.querySelectorAll('.pswp')[0];
    // Création d'un array avec toutes les images à afficher
    var items = [
        {
            src: '/*URL image 1 */', // URL de l'image à afficher
            w: 964,  // Largeur l'image 1 (en px)
            h: 1024  // Hauteur l'image 1 (en px)
        },
        {
            src: '/*URL image 2 */', // URL de l'image à afficher
            w: 1024, // Largeur l'image 2 (en px)
            h: 683   // Hauteur l'image 2 (en px)
        },
		//...
        {
            src: '/*URL image n */', // URL de l'image à afficher
            w: 1024, // Largeur de l'image n (en px)
            h: 683   // Hauteur de l'image n (en px)
        },
    ];
    // Definition d'autres options plus avancées
    var options = {       
      	history: false, // Si cette valeur est False, lorsque le retour en arrière est fait, la présentation est quittée.
      	focus: false,   // Garde le focus sur l'élément PhotoSwipe si cette valeur est TRUE
        showAnimationDuration: 0,  // Propriété plus complexe, à developper
        hideAnimationDuration: 0   // Propriété plus complexe, à developper
    };
    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
};

// Appel de la fonction ouvrant la gallerie photo par un bouton de lancement
openPhotoSwipe();
document.getElementById('btn').onclick = openPhotoSwipe;

Liens Externes

Site du développeur de la bibliothèque : http://photoswipe.com/