To do Before and After pictures in Squarespace, you can follow these steps.
- When users hover on Before or After text, will show corresponding pictures under.
- You can also use this Before After Slider free widget or Before After Plugin (paid) to achieve this without using code.
- If you can’t make it work, you can comment below/message me/email me with site url, I can help easier.
#1. First, you add a Text Block with some text/url.
Make sure the option “Open link in new tab” is disabled
- #before
- #after
and 2 Image Blocks below.
#2. Install Squarespace ID Finder to find the ID of the Image Block.
In my example, we will have:
- Left image: #block-yui_3_17_2_1_1714699207155_10055
- Right image: #block-yui_3_17_2_1_1714699207155_10718
#3. Use code to Code Injection – Footer (or Page Header Code Injection)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Before
$("#block-yui_3_17_2_1_1714699207155_10055").closest('.fe-block').addClass('before show');
// After
$("#block-yui_3_17_2_1_1714699207155_10718").closest('.fe-block').addClass('after');
// Before
$('a[href="#before"]').hover(function(){
$(".before").addClass("show");
$('.fe-block:not(.before)').removeClass('show');
}
);
// After
$('a[href="#after"]').hover(function(){
$(".after").addClass("show");
$('.fe-block:not(.after)').removeClass('show');
}
);
});
</script>
<style>
.before .image-block, .after .image-block {
display: none;
}
.show .image-block {
display: block !important;
}
.show {
z-index: 999999 !important;
}
</style>
#4. Explain code
