Using a jquery script on one gallery

OscourOscour Big grinsPosts: 36Registered Users Big grins
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
My Homepage

Comments

  • OscourOscour Big grins Posts: 36Registered Users Big grins
    edited 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 :
    1. 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>
      
    2. 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);
      }
      
    3. 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
    _________________
    Oscour
    My Homepage
  • Eric_RoussetEric_Rousset Eric Rousset Posts: 3Registered Users Beginner grinner
    edited 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
Sign In or Register to comment.