Colour Swatch Change Image

Site URL: https://beagle-toucan-32ml.squarespace.com/450-rally

I need to add a colour swatch beneath the image of the bike which upon selection will change the image of the bike - like this https://www.kovemoto.com/index.php?c=show&id=71

site: https://beagle-toucan-32ml.squarespace.com/450-rally

pw: Kovo24

Add this position to change this image? You will have 2 or 3 or 4 colors or?

On 11/22/2024 at 10:26 AM, tuanphan said:

Add this position to change this image? You will have 2 or 3 or 4 colors or?

 

Max 2 options please Tuan! 

You can follow these

Description: Users click color on right side >> Change Image on left side

#1. First, you need to add 4 Image Blocks (we will use 2 Image Blocks for Colors)

#2. Find ID of 4 Image Blocks.
In my example, we will have

• Blue Image: #block-yui_3_17_2_1_1732782993034_14332
• Red Image: #block-9bd0a46448e6d6f89699
• Blue circle: #block-169c54d83e1f15a451a1
• Red circle: #block-217d3e7c50084a2b2f34

#3. Use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    // hide red image on initial
    $('#block-9bd0a46448e6d6f89699').hide();
    // when users click blue circle
    $('#block-169c54d83e1f15a451a1').click(function() {
        $('#block-yui_3_17_2_1_1732782993034_14332').show();
        $('#block-9bd0a46448e6d6f89699').hide();
        $('#block-169c54d83e1f15a451a1').addClass('active');
        $('#block-217d3e7c50084a2b2f34').removeClass('active');
    });
    // when users click red circle
    $('#block-217d3e7c50084a2b2f34').click(function() {
        $('#block-9bd0a46448e6d6f89699').show();
        $('#block-yui_3_17_2_1_1732782993034_14332').hide();
        $('#block-217d3e7c50084a2b2f34').addClass('active');
        $('#block-169c54d83e1f15a451a1').removeClass('active');
    });
});
</script>

Remember to replace ID in the code

#4. To change image opacity when users click red/blue circle image, you can use this code under

<style>
  div.image-block.active img {
   opacity: 0.5;
  }
</style>

Result