TwentyTwenty Visual Diff Script

#1

Hi all!

I would like to display a before/after slider in a lightbox. I’ve been using the TwentyTwenty script (https://zurb.com/playground/twentytwenty) on a regular website but I have to admit I’m struggling to implement in using Unbounce.

Do I need to change some of the wording, like replacing #container1 with #lp-pom-box1?
Is it even possible considering that this plugin depends on both jquery & jquery.event.move?

Thanks gals & guys!

Max

#2

Hi @mxlbld,

Generally speaking scripts you find on the internet need to be heavily modified to work on an Unbounce page.

However, I know another expert has a similar script working on some of his pages. I’m just not sure if it’s the exact same one.

@Stefano can you help out here with your script?

Best,
Hristian

#3

Hi there!

Is this what you’re looking to accomplish?

  1. Create an HTML box and paste this inside:
<div id="comparison">
  <figure>
    <div id="divisor"></div>
  </figure>
  <input type="range" min="0" max="100" value="50" id="slider" oninput="moveDivisor()">
</div>
  1. Copy paste this JS code and place it before body end tag
<script>

var divisor = document.getElementById("divisor"),
slider = document.getElementById("slider");
function moveDivisor() { 
	divisor.style.width = slider.value+"%";
}
  
</script>
  1. Copy paste this CSS & replace background-image: url with your two images.
<style>

div#comparison { 
  width: 60vw;
  height: 60vw;
  max-width: 600px;
  max-height: 600px;
  overflow: hidden; }
div#comparison figure { 
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-before.jpg); 
  background-size: cover;
  position: relative;
  font-size: 0;
  width: 100%; 
  height: 100%;
  margin: 0; 
}
div#comparison figure > img { 
  position: relative;
  width: 100%;
}
div#comparison figure div { 
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/photoshop-face-after.jpg);
  background-size: cover;
  position: absolute;
  width: 50%; 
  box-shadow: 0 5px 10px -2px rgba(0,0,0,0.3);
  overflow: hidden;
  bottom: 0;
  height: 100%;
}

input[type=range]{
  -webkit-appearance:none;
  -moz-appearance:none;
  position: relative;
  top: -2rem; left: -2%;
  background-color: rgba(255,255,255,0.1);
  width: 102%; 
}
input[type=range]:focus { 
  outline: none; 
}
input[type=range]:active { 
  outline: none;  
}

input[type=range]::-moz-range-track { 
  -moz-appearance:none;
    height:15px;
    width: 98%;
    background-color: rgba(255,255,255,0.1); 
    position: relative;
    outline: none;    
 }
input[type=range]::active { 
  border: none; 
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none;
    width: 20px; height: 15px;   
    background: #fff;
    border-radius: 0;
   }
input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
  width: 20px;
  height: 15px;
  background: #fff;
  border-radius: 0;
     }   
input[type=range]:focus::-webkit-slider-thumb {
    background: rgba(255,255,255,0.5);
   }
input[type=range]:focus::-moz-range-thumb {
    background: rgba(255,255,255,0.5);
   }
}
</style>

Let me know if this helps! :grinning:

1 Like
#4

Hey guys!

Thank you so much for getting back to me so quickly.
That is indeed what I’m trying to accomplish.

@Stefano, I followed your instructions but unfortunately, something went wrong (see attached screenshot).
I end up with two cropped photos, and no slider.

Any idea what went wrong?

Best,

Max

#5

Hey again!

Not totally sure without having a URL (you can PM this to me if you’d like).

You can download the page right here if you’d like to copy exactly what I did!

If ever this link expires, let me know :slight_smile:

2 Likes
#6

Hey @Stefano !

Thanks for the great script.
i’m trying to modify it to include a small picture with two arrow to replace the basic handle currently in.

Do you have any idea ?

Here is my LP (still a work in progress):https://recevoir.mes-devis-pratiques.fr/securdouche/a.html

And here what i would like to achieve : https://www.independanceroyale.com/DO-28/index.php (you can see the Before/after at the end of the page).

Thanks for any help !

#7

Hi Julien!

You should be able to tweak some of the CSS to get your desired result. If I have some time before I leave for :palm_tree: on Saturday, I’ll try to shoot something your way!

1 Like
#8

Hello @Stefano !

I found a solution myself by adding a picture of the handle instead of using CSS :slight_smile:

But i’m trying to use this into another landing page and i’m facing a small challenge.
The two pictures i use for the script and transparent PNG and are almost identical.
here is the landing page: https://recevoir.mes-devis-pratiques.fr/sfte-dynamic/d.html

The problem i have is when i’m moving the handle to the right, the new picture appearing keeps the old one in the background, killing the effect.
Have you an idea of what code or parameters (i tried to mess with them but to no success) i have to add to hide the before picture ?

Thanks in advance

#9

Hi Julien!

Looks like this is a caveat of using two PNGs.

Would you be willing to kill the gradient background? if so, you won’t need to rely on transparent before/after.

Great stuff :slight_smile: