Evgeny Posted January 24, 2020 Share Posted January 24, 2020 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.