Menu icon Foundation
Twenty Twenty not moving

Hello,

I am trying to use twenty twenty to have a before and after photo on my squarespace site.  I can see the images with the split line in the middle, however it does not scroll left or right. 

Tried to follow this helpful article - http://www.jakelaughlinphotography.com/blog/using-twentytwenty-with-squarespace

however it isn't working.  Tried with one set of images and multiple images.  

Is there something else I need to download that isn't in the article?

 

Also here is my code, but removed the link to the photos and not sure if it makes a difference but the image shows up as "bedroom+before+photo.jpg" and "bedroom+after+photo.jpg"

 

<script src="/s/jquery-210min.js" type="text/javascript"></script>
<script src="/s/jqueryeventmove.js" type="text/javascript"></script>
<script src="/s/jquerytwentytwenty.js" type="text/javascript"></script>
<link rel="stylesheet" href="/s/twentytwenty.css" type="text/css" media="screen" />

<div class="myBeforeAfter">
<div id ='twentyBox' class='twentytwenty-container'>
  <img src="the link to my before image.jpg">
  <img src="the link to my after.jpg">   
</div>
<div>
<script>
        $(window).load(function(){
          $("#twentyBox").twentytwenty();
        });
  </script>

 

Thanks in advance!

twenty twentyscrollnot working

Hello,

I am trying to use twenty twenty to have a before and after photo on my squarespace site.  I can see the images with the split line in the middle, however it does not scroll left or right. 

Tried to follow this helpful article - http://www.jakelaughlinphotography.com/blog/using-twentytwenty-with-squarespace

however it isn't working.  Tried with one set of images and multiple images.  

Is there something else I need to download that isn't in the article?

 

Also here is my code, but removed the link to the photos and not sure if it makes a difference but the image shows up as "bedroom+before+photo.jpg" and "bedroom+after+photo.jpg"

 

<script src="/s/jquery-210min.js" type="text/javascript"></script>
<script src="/s/jqueryeventmove.js" type="text/javascript"></script>
<script src="/s/jquerytwentytwenty.js" type="text/javascript"></script>
<link rel="stylesheet" href="/s/twentytwenty.css" type="text/css" media="screen" />

<div class="myBeforeAfter">
<div id ='twentyBox' class='twentytwenty-container'>
  <img src="the link to my before image.jpg">
  <img src="the link to my after.jpg">   
</div>
<div>
<script>
        $(window).load(function(){
          $("#twentyBox").twentytwenty();
        });
  </script>

 

Thanks in advance!

Mike Ste. Marie almost 3 years ago

This can be closed.  My issue was resolved - I went back and overlooked the fact I needed to upload the jquery.event.move.js file.  Works like a charm now!