Parallax coding gone wrong

Site URL: https://www.katherineelder.com/

Hello,

A while back I added the following coding to my website to create parallax in the background images. Yesterday I changed the header image on the shop page and all the section background images have gone and I don't know why. Please could you help me?

Current Code Injections.

HEADER

<style>

  body.header--menu-open .header-title {

    filter: unset !important;

}

body.header--menu-open header#header img {

    content: url(https://static1.squarespace.com/static/60e2168480601f08e2ae389e/t/627bc5bf85a284571e186ead/1652278719894/Katherine_Elder_logo_sky.png) !important;

}

</style

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

<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

FOOTER

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

<script> 
  $('.has-background:not(:has(.sqs-video-background))').each(function() {
    var findImage = $(this).find('.section-background img');
    var imgUrl = findImage.data('src') + '?format=2500w';
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        bleed: 0,
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: .2,
    })
});
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
        jQuery(window).trigger('resize').trigger('scroll')
    }, 100)
}; 
</script>

<style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>

Thanks!!

3 hours ago, katieelder said:

Site URL: https://www.katherineelder.com/

Hello,

A while back I added the following coding to my website to create parallax in the background images. Yesterday I changed the header image on the shop page and all the section background images have gone and I don't know why. Please could you help me?

Current Code Injections.

HEADER

<style>

  body.header--menu-open .header-title {

    filter: unset !important;

}

body.header--menu-open header#header img {

    content: url(https://static1.squarespace.com/static/60e2168480601f08e2ae389e/t/627bc5bf85a284571e186ead/1652278719894/Katherine_Elder_logo_sky.png) !important;

}

</style

 

 

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

<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

 

 

FOOTER

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

<script> 
  $('.has-background:not(:has(.sqs-video-background))').each(function() {
    var findImage = $(this).find('.section-background img');
    var imgUrl = findImage.data('src') + '?format=2500w';
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        bleed: 0,
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: .2,
    })
});
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
        jQuery(window).trigger('resize').trigger('scroll')
    }, 100)
}; 
</script>

<style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>

 

Thanks!!

I check on dev tool and find that jquery is not defined

You can add the following script on top of your code injection

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

hello @bangank36 I have tried what you suggested at the beginning on the footer but I still cannot see the images?

<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>

<script> 
  $('.has-background:not(:has(.sqs-video-background))').each(function() {
    var findImage = $(this).find('.section-background img');
    var imgUrl = findImage.data('src') + '?format=2500w';
    var dimensions = findImage.data('image-dimensions');
    var imgWidth = dimensions.substr(0, dimensions.indexOf('x'));
    var imgHeight = dimensions.substr(dimensions.indexOf('x') + 1);
    $(this).parallax({
        bleed: 0,
        imageSrc: imgUrl,
        naturalWidth: imgWidth,
        naturalHeight: imgHeight,
        speed: .2,
    })
});
document.getElementsByTagName("body")[0].onresize = function() {
    setTimeout(function() {
        jQuery(window).trigger('resize').trigger('scroll')
    }, 100)
}; 
</script>

<style>.has-background{background-color:transparent!important}.has-background .section-background{background-color:transparent!important}.has-background .section-background img{visibility:hidden!important}.has-background.background-width--inset{margin:4vw;padding:0!important}.has-background.background-width--inset:not(.content-collection):not(.gallery-section) .section-background{top:0!important;right:0!important;bottom:0!important;left:0!important}</style>

I got the original code from this website

https://stnsvn.com/blog/how-to-add-parallax-scrolling-squarespace-7-1

What am I doing wrong?

Thanks!

Which page do you have problem with? Homepage is fine

Hello, did you find out what was the problem? I have the same issue. Thank you