Comparaison Avant|Après • Code source,
Qu’est-ce que c’est, à quoi ça sert ?
Avant|Après est une fonction de comparaison entre deux images. J’ai initialement développé cet outil pour permettre à mes lecteurs de pouvoir très rapidement et avec une grande efficacité, comparer mes photographies avant et après leur traitement. Cela me permet d’accompagner débutants et amateurs dans une logique d’apprentissage ouverte de la photographie. Cette volonté est encore peu répandue, elle est surtout à l’opposé des méthodes nauséeuses que tant de personnes adoptent encore, laissant croire — aux plus novices et/ou naïfs — que leurs photos sont « brutes de boîtier », non retouchées, etc. Une pseudo tentative d’auto-préservation, bien ridicule, mais surtout trop humaine… La fonction est particulièrement simple à utiliser : il suffit de placer le curseur de la souris au dessus de l’image à comparer et la fonction s’active aussitôt, permettant ainsi, alors que l’on balade le curseur, de comparer deux états différents.
Désormais, je donne accès gratuitement au code source de cet outil afin que davantage de personnes désireuses de partager leur travail selon ce principe, puissent aisément le faire.
Licence
de Édouard Puginier est mis à disposition selon les termes de la licence Creative Commons Paternité – Partage à l'Identique 3.0 non transposé. Les autorisations au-delà du champ de cette licence peuvent être obtenues à http://tazintosh.com/contact/
Démonstration et idées
Détails
- Outil simple, efficace et ludique
- Comparez ce que bon vous semble
- Gratuit
- Pour projets perso. ou commerciaux
- Multi plate-forme
Bibliographie
<div class="comparisonArea"> <img class="afterElement" src="pathToTheAfterPicture" alt=""> <img class="beforeElement" src="pathToTheBeforePicture" alt=""> </div>
.comparisonArea {
display: inline-block;
cursor: ew-resize;
position: relative;
}
.afterElement,
.beforeElement {
display: block;
}
.beforeElement {
left: 0px;
top: 0px;
position: absolute !important;
clip: rect(auto, 0px, auto, auto);
}
Plus d'informations. Notez qu'en ligne 22, on rentre dans DOM Ready
/* ============================================================ */
/* Before|After • Comparison Feature v1.0 — ©Édouard Puginier — http://tazintosh.com */
/* Under Creative Common license Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) */
/* ============================================================ */
function setupComparison(beforeElement) {
var comparisonAreaElem = jQuery(beforeElement).parent();
function comparisonStart(event) {
var offset = jQuery(beforeElement).offset();
var x = event.pageX - (offset.left);
jQuery(beforeElement).css('clip', 'rect(auto,' + x + 'px, auto, auto)');
};
function comparisonStop(event) {
jQuery(beforeElement).css('clip', 'rect(auto, 0px, auto, auto)');
};
comparisonAreaElem.mousemove(comparisonStart);
comparisonAreaElem.mouseleave(comparisonStop);
}
jQuery(document).ready(function(){
// Detecting available comparisons
jQuery(".beforeElement").each(function(beforeElementIndex, beforeElement){
setupComparison(beforeElement);
});
});
Participer
What else?
Ce café symbolique ou votre commentaire seraient un véritable encouragement à vous proposer davantage de contenus. Merci…
Merci beaucoup pour cette fonctionnalité ! Code source propre et simple comparé aux équivalents qui existent ! En plus en CC, que demande le peuple :)
Merci Kreatox.
Tres bonne idée …
Je garde ça peut être utile pour certains tuto
Tu envisages de le proposer en tant que plugin pour WP ?
Pour le plugin dédié WP, il me faut étudier la question, mais c’est un coup à devoir gérer deux développements différents alors qu’ici, la fonctionnalité s’intègre déjà à WP en moins de 5 minutes et conserve une très grande souplesse de déploiement.
Si tu utilises la fonction sur ton site, tiens-moi au courant, je pourrais t’intégrer à la liste des « ils l’utilisent déjà », dans ce post.
Bonjour !
Merci beaucoup pour cette fonctionnalité. C’est vraiment génial et très facile à mettre en place :-)
Ça a trouvé sa place sur mon blog : http://blog.julientordjman.fr ! ;-)
Julien
Super !