What's cool about Squarespace is that you can go and use and out of different features. You may have seen on several websites those before-and-after sliding images where there’s slider in the middle and you move it to see comparison between the before and the after shot. Well, as with all things Squarespace-related, doing so is a breeze. It requires only 4 steps and I will show you how to do it. It requires you to be a bit of code.

Download and Upload

Before we really do anything we have to download the actual code. The best I found is from this guy over at MassExodus put together a nice tutorial that explains how to achieve what will do today however I will simplify it. So to download the code, head over to this page and click the download button about a third of the way down. Once that's done, just unzip it and open up your Squarespace configuration page. Then, just create a new page and upload the code in files tab. Then you can delete the link. Basically, what you just did is you uploaded four files to Squarespace’s server. Deleting the link will not cause the deletion of the files.

Code It

Okay, you don't need to actually coding anything. Just got the the following code into Inject code section of the site. It is situated in Settings —> Advanced —> Code Injection. I do have some code there but, if you're new, you should not.

Here's the code:

<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src=“/s/jquery-213min.js"><\/script>')</script>

<script src="/s/jqueryeventmove.js" type=“text/javascript"></script>

<script src="/s/jquerytwentytwenty_mx.js" type=“text/javascript"></script>

<link rel="stylesheet" href="/s/twentytwenty.css" type="text/css" media="screen" />

And how to do it in a GIF:

The Last Little Bit of Code

<script>

$(window).load(function() 

 $(“.sqs-gallery-block-stacked").twentytwenty();

});

</script>

That's the code you need to add as a code block as the very last content of your blog page (but before the footer). You could also put it into there whole websites footer but that would turn every stacked gallery into an before-and-after image. I strongly don't recommend the latter. You will see a preview unavailable message because you’re editing your blog. When your content is published and viewed from outside of the configuration page, everything will be fine.

The message that you can ignore

Stacked Gallery

As I just mentioned, need to upload your two images in a stacked gallery. That is very simple and the stack gallery block can be found with all of the others content blah that Squarespace offers. Keep note that the left (before) image will correspond to the second (right) file you upload into the gallery.

The before-and-after sliding image works as well on mobile as it does on desktops. It adds a lot of interactivity and interest to your website. It's very effective to show off a new portfolio piece with the first image unretouched and the last final masterpiece.

Whenever I find and use Squarespace feature that I love, I write a blog post on how to do it. This way, people can benefit from my discovery. I hope that you liked this one and I will see you in a few days.

 

Here's what it produces:


Cheers,

Tristan