Jump to content

Parallax coding gone wrong

Recommended Posts

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!!

Edited by katieelder
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

image.png.3d55eef1f2f53d8d6ec7f18ddc8fc6f7.png

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>

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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!

Link to comment
  • 1 month later...

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.