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

Evgeny

Member
  • Content Count

    1
  • Joined

  • Last visited

  1. 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
×
×
  • Create New...