Jump to content

[Share] Simple Before-After Image

Recommended Posts

Demo: https://tuanphan-demo01.squarespace.com/click-text-show-image?noredirect

Pass: abc

If you can't make it work, you can share link to your site + which exact code did you add, I can check easier.

#1. First, you add a Text Block with some text/url.

  • #before
  • #after

Make sure the option “Open link in new tab” is disabled

image.png.6a28d5c82ac7b309363a7af6e56267ac.png

image.png.31fd527268292c0eeedc3f3e850fd955.png

 

#2. Add 2 Image Blocks below Text

image.png.2f1ae6daa3034c571ce99e4bcee75090.png

#3. Install Squarespace ID Finder to find the ID of the Image Block.

https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

In my example, we will have:

  • Left image: #block-yui_3_17_2_1_1714637665132_10256
  • Right image: #block-yui_3_17_2_1_1714637665132_10719

image.png.3906b254721257d422d6d052f66fdc3c.png

#4. 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_1714637665132_10256").closest('.fe-block').addClass('before show');
  // After
$("#block-yui_3_17_2_1_1714637665132_10719").closest('.fe-block').addClass('after');
  
  // Before
  $('a[href="#before"]').click(function(){
    $(".before").addClass("show");
    $('.fe-block:not(.before)').removeClass('show');
    }
  );
// After
 $('a[href="#after"]').click(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>

image.png.74f30227b08a84a22dfd5eb88ed7ff2b.png

#5. Explain code a bit

image.png.ec3ebedc388a662b483436afe5155194.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Replies 0
  • Views 493
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.