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 =0function 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 +1if(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 )})
This code works when I use on the SuperHi site but just cant quite wrap my head around how to implement it in squarespace....
Question
failbetter
Site URL: https://amphibian-pineapple-742d.squarespace.com/portfolio-fluid
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?
This code works when I use on the SuperHi site but just cant quite wrap my head around how to implement it in squarespace....
Added this in the code Injection footer:
then added the imageadder.js file into site as a link....
Just can't figure out the next steps... code block with something like this where images are in a page with a gallery??
Would greatly appreciate some help with this @creedon @tuanphan or anyone!
ps site is under development but page is :https://amphibian-pineapple-742d.squarespace.com/portfolio-fluid
password: sos
Link to comment
Top Posters For This Question
1
2
Popular Days
Jun 28
3
Top Posters For This Question
creedon 1 post
failbetter 2 posts
Popular Days
Jun 28 2022
3 posts
Popular Posts
creedon
Is this a trial site? If so then this technique only works for paid sites. When in trial mode you have to add the script to Code Injection.
2 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment