How to add a Before After Image Slider on Squarespace 7.0

**Now available for Squarespace 7.1 **

We came across this blog post written by Anthony Kramer a few years ago, who had modified a twentytwenty plugin developed by Zurb.com to be used within the Squarespace platform.

The plugin uses the Stacked Image Gallery Block within Squarespace for the before and after effect. Below are instrustions on how you can install it for use in Squarespace 7.0.

STEP 1 DOWNLOAD CODE

Download the following files.

STEP 2: INSTALL THE CODE

To upload the files, click on the add link option, see below

Then click on the gear image, see below.

Select the file option in order for you to be able to upload the files. Then click on the ‘UPLOAD FILE’ link to upload file.

STEP 3: INJECT CODE

Go to Settings > Advanced > Code Injection to add the following code to the header and footer of your website.

Into the Header

<!--Before and After Image Slider -->
<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/jqueryimageslidergallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="/s/imageslidergallery.css" type="text/css" media="screen" />

<!-- End of Before and After Image Slider  -->

Into the Footer

<!-- Before and After  Image Slider -->
<script>
$(window).load(function() {
$(".sqs-gallery-block-stacked").imageslidergallery();
});
</script>
<!-- End of Before and After  Image Slider -->

STEP 4: CUSTOMIZE CODE (OPTIONAL)

To remove the overlay add the following code by going to Design > Custom CSS .

/* Image Slider Overlay */
.imageslidergallery-overlay {
visibility: hidden !important;
}

If you want images the stacked vertically instead of horizontally, add then replace the footer code with the one below:

<!-- Before and After  Image Slider  -->
<script>
$(window).load(function() {
$(".sqs-gallery-block-stacked").imageslidergallery({
orientation: 'vertical'
});
});
</script>
<!-- End of Before and After  Image Slider -->

The default starting position of the slider is "0.5", however, you can change the value between "0" and "1".  With "0" being totally left and "1" totally right.

If you wanted the line to start say 30% from the left side, you would use "0.3"

<!-- Before and After  Image Slider  -->
<script>
$(window).load(function() {
$(".sqs-gallery-block-stacked").imageslidergallery({
default_offset_pct: 0.3
});
});
</script>
<!-- End of Before and After  Image Slider  -->

Below is an example code where the images is stacked vertically and the slider starts 30% from the left.

<!-- Before and After  Image Slider  -->
<script>
$(window).load(function() {
$(".sqs-gallery-block-stacked").imageslidergallery({
orientation: 'vertical',
default_offset_pct: 0.3
});
});
</script>
<!-- End of Before and After  Image Slider  -->

Troubleshooting.

If you are having issues with the plugin.

1. Ensure that Ajax Loading turned off. To do this, simply go to "Design > Site" Styles and turn Ajax off.

2. For mobile devices, make sure that JavaScript is enabled on the mobile device.

3. Other codes on your site interfering with the Image Slider. To sort this take out the codes and test again, then slowly add the code back to work out which section of the code is interfering with the Slider.

All work in this guide is provided ?“AS IS”. Other than as provided in this agreement, this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.