Jump to content

click on a site to add a new image in Squarespace? with Javascript?

Recommended Posts

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?

// 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 )
	
})

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: 

<!-- Image adder -->
<script src="/s/imageadder.js"></script>
<!-- Image Adder -->

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?? 

<article class="imageadder" data-url=“/portfolio”></article>

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
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Hey @creedon - Yeah because I was just trying it to figure it out - I can do it on a paid site but I still dunno where to put what! Someone said that you'd have to add the images in code blocks but I was thinking if they were in a gallery or something elsewhere in the site with the right names or classes i could maybe implement it....

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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