Before|After Comparison • Source Code,
What is it, what’s for?
Before|After is a comparison feature between two images. I originally developed this tool to allow my readers to be able to very quickly and with high efficiency, compare my photographies before and after the post-processing. This allows me to support beginners and amateurs in a logic of learning photography in a opened way. This wish is still uncommon, it is especially in contrast to nauseous methods so many people still adopt, suggesting — to the most novice and/or naive — that their photos are unedited, right from the camera, etc. A pseudo attempt at self-preservation, very ridiculous, but also human too… The function is particularly simple to use: just place the mouse cursor over the image to be compared and the function is activated immediately, thus allowing, while you ride the cursor, to compare two different states.
Now, I give free access to the source code of this tool so that more people wanting to share their work based on this principle, can easily do so.
License
by Édouard Puginier is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License. Permissions beyond the scope of this license may be available at http://tazintosh.com/en/contact/
Demos and ideas
Details
- Simple tool, efficient and fun
- Compare just anything you want
- Free
- For personal & pro. projects
- Cross-platform
Bibliography
<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);
}
More informations. Please note that at line 22, starts 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);
});
});
Be part of it!
What else?
This symbolic coffee or your comment would be a true encouragement to offer you more contents. Thanks…
