Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Evgeny

Adding custom js to dynamically resize banner images

Question

Hi,

I have a Nuevo template website with 3 parallax images. I am trying to add custom JS to dymanically resize said parallax images. The code is tested and works when injected into the Chrome / Firefox console yet whenever I try to compile it in my Local Development environment, there is no change to the image size.

The js is stored in the Scripts folder as a separate file containing the following code:

document.onload = (function () {
    const resizeImgs = () => {
        let imgs = document.querySelectorAll('.Parallax-item > .Index-page-image > img');
        let div = document.querySelector('.row');

        for (i = 0; i < imgs.length; ++i) {
            console.log("Sup Dawg");
            let oW = imgs[i].style.width.substring(0, imgs[i].style.width.length - 2);
            let oH = imgs[i].style.height.substring(0, imgs[i].style.height.length - 2);
            let oT = imgs[i].style.top.substring(0, imgs[i].style.top.length - 2);
            let ratio = oH / oW;
            imgs[i].style.width = `${div.offsetWidth}px`;
            imgs[i].style.height = `${div.offsetWidth * ratio}px`;
            let diffH = oH / (div.offsetWidth * ratio);
            imgs[i].style.top = `${oT * 0.8 / diffH}px`;
            imgs[i].style.left = `${(window.innerWidth - div.offsetWidth) / 2}px`;
        }
    }

    resizeImgs();

    let doit;
    window.onresize = function () {
        clearTimeout(doit);
        doit = setTimeout(resizeImgs, 100);
    };
})();

It is then called in the end of the site.region's body via:

<squarespace:script src="img-resize.js" combo="false" />

I placed this right after the template's other JS call:

<squarespace:script src="site-bundle.js" combo="false" />

I can see the script running in debugging but it makes no effect on the images I want to change.

Please let me know if you have any ideas on why this might be happening. Been struggling to make it work for the last two days and relatively new to squarespace so any help would be fantastic!

Ev

Share this post


Link to post

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

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


×
×
  • Create New...