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
  • Views 153
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Quote

then added the imageadder.js file into site as a link.... 

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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.