Plugin jQuery Before After - Installation et configuration

Ce tutoriel a pour but d'aider à la prise en main du plugin Before After pour jQuery. Il présuppose que vous ayez quelques connaissances en informatique, à savoir:

• que vous savez ce qu'est un ftp, comment y accéder et y manipuler des fichiers;
• que vous n'ayez pas peur de fouailler les entrailles d'un script, tel un haruspice du codage

Étape 1: Prérequis

La première chose à faire est de télécharger le  plugin Before After pour jQuery. Dézippez-le sur votre disque dur, et installez-le sur votre site via votre ftp. Ne supprimez pas le dossier dézippé de votre disque dur; il aura son utilité.

Une fois tous les éléments du plugin installés sur votre ftp, il faut configurer le script jquery.beforeafter.js. Rassurez-vous, ce n'est pas bien compliqué... quand on sait où et quoi modifier. Pour ce faire, vous aurez besoin d'un éditeur de texte, incluant de préférence une coloration syntaxique. Sous Windows, Notepad++ fera l'affaire; sous Mac, Smultron est un bon choix. Ils sont tous les deux disponibles gratuitement.

Étape 2 : Configuration du script

Une fois votre éditeur de texte prêt à l'emploi, utilisez-le pour ouvrir le fichier jquery.beforeafter.js qui se trouve sur votre disque dur.
N.B.: Les extraits de code sont formatés avec un alinéa et la police Courier New; les éléments à modifier sont indiqués en rouge sombre.

Ouvrez la console de recherche (menu Édition > Rechercher, ou raccourci Ctrl+F sous Windows, +F sous Mac) et tapez le texte suivant: imagePath.
Vous devriez arriver dans la section des réglages par défaut, qui devrait ressembler à ceci (lignes 16‑23):

var defaults =
            {
                animateIntro : false,
                introDelay : 1000,
                introDuration : 1000,
                showFullLinks : true,
                imagePath : '/js/beforeAfter/'
            };

Remplacez simplement le texte /js/beforeAfter/ (sans supprimer les apostrophes) par le chemin d'accès du dossier où se trouvent les images que vous voudrez utiliser avec le plugin. Dans l'idéal, le mieux reste de placer les images dans le dossier où se trouve le plugin, mais ce n'est pas une obligation, si vous êtes prêt à modifier du code.

Ouvrez à nouveau la console de recherche, et tapez-y le texte suivant: handle.
Vous devriez arriver dans une la partie de code suivante (lignes 48-49):

// Create an inner div wrapper (dragwrapper) to hold the images.
            $(obj).prepend('<div id="dragwrapper'+randID+'"><div id="drag'+randID+'"><img width="8" height="56" alt="handle" src="'+o.imagePath+'handle.gif" title="Drag me left or right to see the before and after images" id="handle'+randID+'" /></div></div>');

Ces lignes de code, et les quelques-unes qui suivent, créent une boîte (div) dans laquelle les images apparaîtront. L'élément important des lignes citées ci-dessus est le fichier handle.gif; il s'agit de l'image de la barre de défilement qui permettra de faire apparaître l'une ou l'autre des deux images, selon que l'on leadéplacera vers la gauche ou vers la droite. Le code qui suit src= indique le chemin d'accès à ce fichier. Vous voyez qu'on y retrouve imagePath; cela signifie que le fichier handle.gif doit impérativement se trouver dans le dossier visé par le chemin d'accès imagePath. Sinon, l'image de la barre de défilement sera remplacé par le texte alternatif (en abrégé alt, qui dans notre cas est "handle"). L'attribut title, qui suit le chemin d'accès, définit le texte qui apparaît lorsque la souris est positionnée sur l'élément; si vous souhaitez mettre un texte en français, c'est cet attribut qu'il faut modifier (sans supprimer les guillemets anglais).

Ouvrez à nouveau la console de recherche et tapez-y le texte suivant: Show only before.
Vous devriez arrivez dans la partie de code suivante (ligne 64):

$(obj).after('<div class="balinks" id="links'+randID+'" style="position:relative"><span class="bflinks"><a id="showleft'+randID+'" href="javascript:void(0)">Show only before</a></span><span class="bflinks"><a id="showright'+randID+'" href="javascript:void(0)">Show only after</a></span></div>');

Cette partie du code est relative au texte qui s'affiche en bas de la boîte où les images vont apparaître, respectivement à gauche et à droite. Si vous souhaitez mettre un texte personnalisé, il vous faut modifier les textes Show only before et Show only after.

Voilà pour les grandes lignes. Il y a sans doute encore plein d'options que l'on peut modifier à travers ce fichier, mais l'essentiel est là. Pour ma part, je ne suis pas allé plus loin, parce que je n'en avais pas besoin. Inutile donc de me demander ce que fait telle ou telle ligne de code; je serais bien en peine de vous répondre.

Étape 3: La mise en ligne

Maintenant que votre script jquery.beforeafter.js est configuré, il faut le transférer sur votre ftp. Pour les paranoïaques et les malchanceux comme moi, je vous enjoins à sauvegarder le script d'origine, toujours présent en l'état sur votre ftp. Un truc simple: faites un clic-droit sur le nom du fichier et choisissez l'option Renommer; rajoutez un ou deux caractères (explicites, de préférence) et le tour est joué. Ensuite seulement, transférez votre fichier modifié depuis votre disque dur.
Si vous ne le faites pas, le fichier originel sera écrasé par le fichier modifié, et il sera impossible de revenir en arrière. Le seul moyen de disposer d'un nouveau fichier d'origine sera de le télécharger à nouveau. Ce n'est pas que ce soit long, mais ça peut vite devenir lassant.

Maintenant que le plugin est installé et configuré, il est temps de s'occuper de nos sources épigraphiques.