pharaoriquil Posted September 22, 2022 Share Posted September 22, 2022 Good afternoon. I have custom codes (not created by me) that I would like to add my site. Specifically on a certain page. It contains javascript, CSS and HTML. The purpose of this custom code is to randomly generate images (saved on a folder in my desktop) at a click of a button. I've tried everything I could think of and nothing seems to be working. I should also note, I am not a coder. Any advice or help is appreciated! Link to comment
Ziggy Posted September 23, 2022 Share Posted September 23, 2022 Thanks for posting your question, it's going to be rather tricky for someone on the forum to help with such a specialist task, especially without specifics on the code you're using or the website URL. Can you provide anything else? Where did you get the custom code, and was it designed to work on Squarespace? Where have you put the code? Is this supposed to work on a live website linked to your desktop, I can't say that sounds like it would work online? pharaoriquil 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com ☕ Did I help? Buy me a coffee? 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) Link to comment
pharaoriquil Posted September 23, 2022 Author Share Posted September 23, 2022 I got the code from a youtuber. I have no problem sharing it. And from the tutorial it's supposed to work online. The user didn't specify squarespace but I assumed it would work there too. This is something I'm looking into creating for my site and a rep for squarespace told me this was the place to go to get that kind of help. Below are written codes. Thanks for the help! /index.html <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title> Random Image </title> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <link rel="stylesheet" href="index.css"/> <script src="index.js"></script> </head> <body> <div id="container"> <div id="inner_container"> <img id="image_shower"/> </div> <div id="button_container"> <button onclick="get_random_image()"> <i class="fas fa-random"></i> </button> /index.js // Get all the images image_array = [ '2.jpg', '3.jpg', '4.jpg', '5.jpg' '6.jpg' '7`.jpg' ] function get_random_image(){ // Get a random index random_index = Math.floor(Math.random() * image_array.length); // Get an image at the random_index selected_image = image_array[random_index] // Display the image document.getElementById('image_shower').src = `./images/${selected_image}` } /index.css body{ background-color: #EDF2F4; display: flex; justify-content: center; align-items: center; } #container{ width: 50%; height: 600px; border-radius: 5px; } #inner_container{ width: 100%; height: 80%; box-shadow: 0px 0px 36px -22px #2B2D42; float: left; margin-bottom: 33px; } img{ width: 100%; height: 100%; border-radius: 10px; } #button_container{ width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; } button{ width: 25%; height: 90%; font-size: 20px; color: white; border: none; outline: none; cursor: pointer; border-radius: 5px; background-color: #EF233C; } button:hover{ transition: 0.05s; background-color: #D90429; transform: rotateZ(-10deg); box-shadow: 0 0 30px -10px #D90429; } button:active{ transform: translateY(20px); transform: rotateZ(10deg); } Link to comment
pharaoriquil Posted September 25, 2022 Author Share Posted September 25, 2022 On 9/23/2022 at 4:23 AM, Ziggy said: Thanks for posting your question, it's going to be rather tricky for someone on the forum to help with such a specialist task, especially without specifics on the code you're using or the website URL. Can you provide anything else? Where did you get the custom code, and was it designed to work on Squarespace? Where have you put the code? Is this supposed to work on a live website linked to your desktop, I can't say that sounds like it would work online? I got the code from a youtuber. I have no problem sharing it. And from the tutorial it's supposed to work online. The user didn't specify squarespace but I assumed it would work there too. This is something I'm looking into creating for my site and a rep for squarespace told me this was the place to go to get that kind of help. Below are written codes. Thanks for the help! /index.html <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <title> Random Image </title> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <link rel="stylesheet" href="index.css"/> <script src="index.js"></script> </head> <body> <div id="container"> <div id="inner_container"> <img id="image_shower"/> </div> <div id="button_container"> <button onclick="get_random_image()"> <i class="fas fa-random"></i> </button> /index.js // Get all the images image_array = [ '2.jpg', '3.jpg', '4.jpg', '5.jpg' '6.jpg' '7`.jpg' ] function get_random_image(){ // Get a random index random_index = Math.floor(Math.random() * image_array.length); // Get an image at the random_index selected_image = image_array[random_index] // Display the image document.getElementById('image_shower').src = `./images/${selected_image}` } /index.css body{ background-color: #EDF2F4; display: flex; justify-content: center; align-items: center; } #container{ width: 50%; height: 600px; border-radius: 5px; } #inner_container{ width: 100%; height: 80%; box-shadow: 0px 0px 36px -22px #2B2D42; float: left; margin-bottom: 33px; } img{ width: 100%; height: 100%; border-radius: 10px; } #button_container{ width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; } button{ width: 25%; height: 90%; font-size: 20px; color: white; border: none; outline: none; cursor: pointer; border-radius: 5px; background-color: #EF233C; } button:hover{ transition: 0.05s; background-color: #D90429; transform: rotateZ(-10deg); box-shadow: 0 0 30px -10px #D90429; } button:active{ transform: translateY(20px); transform: rotateZ(10deg); } Link to comment
Ziggy Posted September 26, 2022 Share Posted September 26, 2022 Thanks for sharing this, how have you gone about adding this to your website? This should give you a start on uploading, but I'm not referencing the image correctly, you'll have to upload those and reference them in the javascript file. Maybe best to do this via the same method as with the JS and CSS files described below. How you would do this from your desktop seems impossible to me for Squarespace. The portion in the <head></head> tags should go in the page header code injection. The portion in the <body></body> should go in a code block on the page. The code under /index.js should be put into a plain text document and uploaded as a link in the page section of the dashboard, and copy the url, it should be /s/index.js (this will need adding to the header code to reference correctly) (when you get the images uploaded this would need re-uploading and replacing) The code under /index.css should be put into a plain text document and uploaded as a link in the page section of the dashboard, and copy the url, it should be /s/index.css (this will need adding to the header code to reference correctly) New Header code: <script src="https://kit.fontawesome.com/a076d05399.js"></script> <link rel="stylesheet" href="/s/index.css"/> <script src="/s/index.js"></script> Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com ☕ Did I help? Buy me a coffee? 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) Link to comment
pharaoriquil Posted September 26, 2022 Author Share Posted September 26, 2022 12 hours ago, Ziggy said: Thanks for sharing this, how have you gone about adding this to your website? This should give you a start on uploading, but I'm not referencing the image correctly, you'll have to upload those and reference them in the javascript file. Maybe best to do this via the same method as with the JS and CSS files described below. How you would do this from your desktop seems impossible to me for Squarespace. The portion in the <head></head> tags should go in the page header code injection. The portion in the <body></body> should go in a code block on the page. The code under /index.js should be put into a plain text document and uploaded as a link in the page section of the dashboard, and copy the url, it should be /s/index.js (this will need adding to the header code to reference correctly) (when you get the images uploaded this would need re-uploading and replacing) The code under /index.css should be put into a plain text document and uploaded as a link in the page section of the dashboard, and copy the url, it should be /s/index.css (this will need adding to the header code to reference correctly) New Header code: <script src="https://kit.fontawesome.com/a076d05399.js"></script> <link rel="stylesheet" href="/s/index.css"/> <script src="/s/index.js"></script> Thanks for the input. I'm going to be honest and say it doesn't seem easy to understand. Is this the easiest way to create a custom image generator button on my squarespace website? Is there other codes I can use or other methods to simplify it? Link to comment
Ziggy Posted September 27, 2022 Share Posted September 27, 2022 I would agree that it's not a simple task, there is another thread with a potential answer for you: Does this help? Make sure you upload and replace out the image URL links. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com ☕ Did I help? Buy me a coffee? 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 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