test du plugin before after

before
after

 

 

before
after

 

Mise en œuvre Joomla du plugin CatchMyFame.com jQuery Avant/Après

  • L'enveloppe extérieure doit avoir la classe "plg_content_beforeafter".
    L'enveloppe doit contenir exactement 2 images, enveloppés dans balises <div>.
    Chacune des images doit être exactement la même taille.
    Chacune des balises images doit avoir des attributs de largeur et de hauteur.

Exemple des valeurs par défaut (paramétrées dans le plugin)

<div class="plg_content_beforeafter">
    <div><img src="/images/2016/divers/2016-06-26-----004--01------.jpg" alt="before" border="0" height="768" width="1024" /></div>
    <div><img src="/images/2016/divers/2016-06-26-----004--02------.jpg" alt="after" border="0" height="768" width="1024" /></div>
</div>

 

  • Chaque attribut défini dans les valeurs par défaut peut être modifié en utilisant un attribut de données dans l'enveloppe.

Exemple pour l'image ci-dessus

<div class="plg_content_beforeafter" data-animateintro="true" data-introdelay="2000" data-introduration="8000" data-introposition=".25" data-showfulllinks="true" data-beforelinktext="avant" data-afterlinktext="après" data-clickspeed="100">

  • animateIntro  – la barre de glisser démarre complètement vers la droite du conteneur et progressivement se déplace tout par lui-même au milieu (valeurs : true/false)
  • introDelay – si animateIntro est "true", le nombre de millisecondes à attendre avant de commencer la barre de traînée automatique déménagement vers le centre de l'image (par défaut 1500)
  • introDuration – si animateIntro est "true", le nombre de millisecondes pour quee la barre glisser du côté droit de l'image au centre de l'image (par défaut 1000)
  • showFullLinks – pour afficher des liens sous l'image : montrer l'image entière avant et après (valeurs : true/false)
  • imagePath – le chemin (absolu ou relatif) à l'endroit où vous stockez les images (default ‘/js/beforeAfter/’)
  • introPosition – pourcentage de l'apparition du séparateur : fraction de la largeur totale (par défaut .5). Par exemple, .25 aurait le séparateur glissable apparaissent 1 / 4e de la voie gauche de l'image)
  • beforeLinkText – utilisé avec l'option "showFullLinks", c'est le paramètre pour le lien de l'image avant (par défaut 'Show only before')
  • afterLinkText –utilisé avec l'option "showFullLinks", c'est le paramètre pour le lien de l'image après (default  ‘Show only after’)
  • cursor – le style CSS de la poignée de déplacement (par défaut 'pointer')
  • clickSpeed – la vitesse (en millisecondes) pour amener la séparation au lieu du clic (par défaut 600)
  • linkDisplaySpeed – la vitesse (en millisecondes) pour une animation pour compléter (par défaut 200)
  • dividerColor – la couleur CSS hexadécimale de la barre de séparation (par défaut '#888')
  • enableKeyboard – activer le contrôle du clavier à l'aide des flèches gauche et droite (valeur true/false)
  • keypressAmount – si enableKeyboard est "true", le nombre de pixels pour déplacer la barre de séparation pour chaque pression de touche (par défaut 20)
  • onReady – une fonction de rappel qui est déclenché lorsque le plugin est prêt à être utilisé

 

un problème non réglé => il faut actualiser la page pour que le plugin fonctionne normalement

en poursuivant la navigation sur perlimpinpin.fr, vous acceptez l’utilisation de cookies