Jump to content

Adding custom js to dynamically resize banner images

Recommended Posts

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

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.