Using a jquery script on one gallery

Oscour · August 2, 2012

Hi there,

I'm trying to implement a jquery script in one of my galleries.
This script allows to scroll one image to see it before and after post-treatment.
I'm not a coder so this is not my script, it's from Édouard Puginier.
His blog : http://tazintosh.com/comparaison-avant-apres-code-source/ (in French, sorry)

I don't know how to adapt it to Smugmug...

Here is the elements :

HTML

<div class="comparisonArea">
    <img class="afterElement" src="pathToTheAfterPicture" alt="">
    <img class="beforeElement" src="pathToTheBeforePicture" alt="">
</div>

CSS

.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);
}

JQuery script

/* ============================================================ */
/* Before|After &#8226; Comparison Feature v1.0 &#8212; ©Édouard Puginier &#8212; 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);
    });
});

What I've done :
1. Put the HTML code in the description of my gallery
2. Put the CSS code in the CSS section of the Advanced Site-wide Customization
3. Hosted the script on another site to be able to call it (I don't know how to do otherwise)
4. Put this in the head tag

< script src="http://www.google.com/jsapi"></script >
< script type="text/javascript">google.load("jquery", "1.7.2");</script >
< script src="http://www.mysite.com/before-after.js"></script >

After that, when I go to my gallery, I just see the "after" image.

Then, here is my gallery : http://oscour.smugmug.com/PassionPhoto/BeforeAfter/
Can someone help me please ?
Where am I wrong ?

Thanks

Oscour · August 3, 2012

Hello,

I got it ! <img src="https://us.v-cdn.net/6029383/emoji/clap.gif" border="0" alt="" >
If someone is interested, here is what I've done :

In the description of my gallery :

<html>
<div class="comparisonArea">
    <img class="afterElement" src="http://oscour.smugmug.com/Famille/mariage-dometjeanpi/La-mairie/i-8M36Nrs/0/L/DSC4984-L.jpg" alt="">
    <img class="beforeElement" src="http://oscour.smugmug.com/Famille/mariage-dometjeanpi/La-mairie/i-jx9QsMK/0/L/DSC4989-L.jpg" alt="">
</div>
</html>

In the CSS section :

/********************************************************
 * Before/After CSS
 *******************************************************/
.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);
}

In the head tag :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Script perso -->
<script type="text/javascript">
/* ============================================================ */
/* 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);
    });
});
</script>

Bye

Eric_Rousset · July 27, 2014

Bonjour Sébastien,

J'ai essayé de configurer comme toi mais sans succès malheureusement, je ne trouve pas la partie "HEAD TAG" sur Smugmug...Donc je suis dans l'impasse car j'ai contacté Edouard mais sans réponses pour l'instant

Using a jquery script on one gallery

Comments