CONTACT

    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);
    }