failbetter Posted June 28, 2022 Share Posted June 28, 2022 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
creedon Posted June 28, 2022 Share Posted June 28, 2022 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. failbetter 1 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
failbetter Posted June 28, 2022 Author Share Posted June 28, 2022 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment