Ajout de transitions à la visionneuse Magnific Popup de Divi

14 Sep 2017

Bonjour à tous,

Comme moi, vous ne supportez plus les transitions brutales de la visionneuse de Divi pour les galeries de photos ? Alors voici un petit rafraîchissement du Magnific Popup intégré au thème, avec fade+zoom in et out entre les photosLe résultat est beaucoup plus élégant !

Voici un exemple sur mon site de photo amateur.

Explications

A la fin du chargement de la nouvelle image à afficher, on positionne une classe ‘mfp-image-loaded’ pour indiquer que la transition « in » doit démarrer. A chaque clic sur une des flèches, donc juste avant le chargement de la nouvelle image, on retire cette classe afin d’indiquer que la transition « out » doit démarrer. La variable removalDelay permet de laisser le temps à la transition avant de faire disparaître l’image complètement.

Tout le crédit va à Vitor Melo (et bien sûr à Dmitry Semenov pour la librairie Magnific Popup !) qui a posté une solution inspirée (ou extraite ?) de la visionneuse du thème Enfold, que j’ai adaptée à Divi.

En bonus pour 4 lignes de plus, traduction des infobulles du Magnific Popup.

Code Javascript (à insérer dans le <head> de l’onglet Intégration des options de Divi) :

<script>
jQuery(document).ready(function( $ ) {
$('.et_pb_gallery_image').magnificPopup({
 delegate: 'a',
 type: 'image',
 tClose: 'Fermer',
 gallery:{
   enabled:true,
   tPrev: 'Précédente',
   tNext: 'Suivante',
   tCounter: '%curr% sur %total%'
 },
 mainClass: 'mfp-fade',
 removalDelay: 300,
 callbacks: {
   open: function() {
     $.magnificPopup.instance.next = function() {
       var self = this;
       self.wrap.removeClass('mfp-image-loaded');
       setTimeout(function() {
         $.magnificPopup.proto.next.call(self); }, 120);
     }
     $.magnificPopup.instance.prev = function() {
       var self = this;
       self.wrap.removeClass('mfp-image-loaded');
       setTimeout(function() {
         $.magnificPopup.proto.prev.call(self); }, 120);
     }
   },
   imageLoadComplete: function() { 
     var self = this;
     setTimeout(function() {
       self.wrap.addClass('mfp-image-loaded'); }, 16);
   }
 }
});
});
</script>

Code CSS (à insérer dans le CSS personnalisé des options générales de Divi) :

.mfp-fade .mfp-figure {
  transition: all 0.3s ease-out;
  opacity: 0;
  -webkit-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95); }
.mfp-fade.mfp-image-loaded .mfp-figure {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1); }
.mfp-fade.mfp-removing .mfp-figure {
  opacity: 0;
  -webkit-transform: scale(0.95);
  -ms-transform: scale(0.95);
  transform: scale(0.95); }

Crédit photo article : Fond de image conçu par Jeswin – Freepik.com