I am tying to implement a code I got from a superhi tutorial on a squarespace site. I want to have a gallery that doesn't appear until you click. Like this site - studio-push.com

I have the script written - just not sure how to implement it in squarespace..... any ideas?

    // JavaScript to reveal image on click. 

const images = [
    "Folio-1.jpg",
    "Folio-2.jpg",
    "Folio-3.jpg"
]

let i = 0 

function placeImage(x, y){
    
    const nextImage = images[i]
    const img = document.createImage("img")
    img.setAttribute("src", nextImage)
    img.style.left = x + "px"
    img.style.top = y + "px"
    
    
    // if you want to rotate...
    //img.style.transform = "rotate (" + (Math.random() * 20 - 10) + "deg)"
    
    img.style.transform = "translate(-50%,-50%) scale(0.5)"
    
    document.body.appendChild(img) 
    
    i = i + 1
    
    if (i >= images.length) {
        i = 0 
    }
    
}

document.addEventListener("click", function(event){
    
    event.preventDefault()
    placeImage(event.pageX,event.pageY )
    
})


///on mobile 

document.addEventListener("touchend", function(event){
    
    event.preventDefault()
    placeImage(event.pageX,event.pageY )
    
})