Double-image

Vous souhaitez comparer deux images en les dévoilant progressivement...

Il vous suffit de préparer deux images et d'utiliser la mini-application Double-image pour que la magie s'opère.

Vous pouvez également apporter un complément d’informations en remplaçant ce document PDF par le vôtre. Il s’ouvrira dans une nouvelle fenêtre en cliquant sur .

Téléchargement et utilisation

Cette mini-application a été développée en adaptant le script twentytwenty.

  1. Télécharger le fichier double-image.zip.
  2. Décompresser ce fichier et le décompresser.
  3. Renommer le nom du dossier avec le titre du projet.
  4. Préparer 2 images JPG de même taille.
    Si elles ne sont pas de même taille, la seconde sera automatiquement redimensionnée.
  5. Les nommer image1.jpg et image2.jpg.
  6. Copier les 2 images dans le dossier [images] à la place des images exemples.
  7. Double-cliquer sur le fichier index.html.

Modification facultative de quelques paramètres

L'effet peut être paramétré en ouvrant le fichier index.html dans un éditeur de texte de type Notepad++ :

$(".demo").twentytwenty({
// Position de la séparation au chargement de la page (de 0 à 1)
default_offset_pct: 0.5,
// Orientation du déplacement (horizontal ou vertical)
orientation: 'horizontal',
// Textes affichés (pour le masquer, remplacer display:block; par display:none; dans la balise style de la ligne 12)
before_label: 'Avant',
after_label: 'Après',
// Opacité des images survolées (false ou true)
no_overlay: false,
// Déplacement en cliquant ou non sur la séparation (false ou true)
move_with_handle_only: true,
// Déplacement de la séparation en cliquant ou non sur une des images (false ou true)
click_to_move: true
});