Pas d'animation

[Pedrofsky]

Bonjour Franck, J'ai installé et activé le plugin sur mon site. Mais par rapport aux exemples de cette page, je n'ai pas d'animation en entrant ou sortant de l'image (par exemple la 3ème image avec le troupeau d'animaux cornus). Je trouve cette animation très élégante et j'aimerais l'utiliser sur mon site. Je suis en Dotclear 2.23.1. J'utilise un thème Japonisant modifié, dispo ici. Comment puis-je faire pour activer l'animation une fois le plugin installé ?

[franck-paul]

Bonjour,

Pour ça il faudrait modifier le plugin pour qu'il puisse le permettre ou a minima rajouter les CSS de transition correspondantes dans la feuille de style du thème.

[Pedrofsky]

J'ai ajouté ce qui suit au fichier style.css de mon thème mais pas de changement, sans doute la modification du plugin est-elle obligatoire ?

/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

[Pedrofsky]

Bonjour Franck, J'ai trouvé la solution :-) C'est qu'il faut modifier public.js avec les instructions ci-dessous :

// Initialize popup as usual
$('.popup-link').magnificPopup({
  // Delay in milliseconds before popup is removed
  removalDelay: 300,

  // Class that is added to popup wrapper and background
  // make it unique to apply your CSS animations just to this exact popup
  mainClass: 'mfp-fade'
});

[franck-paul]

Je vais rouvrir ce ticket pour voir comment intégrer ça dans une future version.