CALLINGALLCARS Posted August 21, 2023 Share Posted August 21, 2023 Good afternoon everyone! So at my wits end with this one and i'm sure it is something simple I am overlooking. I am trying to get multiple images to change (or rotate out) with each page refresh within a code block. I have the Business account, so I should be able to use Javascript within the Code Block (BTW, I have also tried this in an Embed Block as well. Thank you in advance for any help that will lead to this functioning correctly!! Here is my code: <script type="text/javascript"> var total_images = 2; var random_number = Math.floor((Math.random()*total_images)); var random_img = new Array(); random_img[0] = '<a href="https://www.countrytonitepf.com/"><img src="'https://images.squarespace-cdn.com/content/v1/64a3fe63e840fa06e8ea1393/1690544840309-GJ8ZT0P51F8T6W403BVX/CountryTonite2.jpg' class="img-fluid" alt="Country Tonite link"></a>'; random_img[1] = '<a href="https://www.grabsomenuts.com/"><img src="'https://images.squarespace-cdn.com/content/v1/64a3fe63e840fa06e8ea1393/be9ae718-0ccb-4e41-b020-8e666edc6591/TryMyNuts-banner.jpg' class="img-fluid" alt="Try My Nuts link"></a>'; document.write(random_img[random_number]); </script> Link to comment
tuanphan Posted August 24, 2023 Share Posted August 24, 2023 Hi, Can you share link to page where you use Code Block? We can check problem easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
CALLINGALLCARS Posted August 24, 2023 Author Share Posted August 24, 2023 here is the link, password is "wtd": https://chameleon-maroon-jfnd.squarespace.com/what-to-do-about Link to comment
tuanphan Posted August 27, 2023 Share Posted August 27, 2023 On 8/24/2023 at 6:02 PM, BIGMACC68 said: here is the link, password is "wtd": https://chameleon-maroon-jfnd.squarespace.com/what-to-do-about You mean change top banner image on refresh or change Code Block image? Currently I see Code Block but no image on Code Block, it show blank white only Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
CALLINGALLCARS Posted August 30, 2023 Author Share Posted August 30, 2023 tuanohan– YES, the code block. I dropped in the code in the Code Block, but it remains blank. I left the settings for the Code Block as HTML, per Squarespace knowledge page. Thank you for your help!! Link to comment
tuanphan Posted September 3, 2023 Share Posted September 3, 2023 On 8/30/2023 at 5:40 PM, BIGMACC68 said: tuanohan– YES, the code block. I dropped in the code in the Code Block, but it remains blank. I left the settings for the Code Block as HTML, per Squarespace knowledge page. Thank you for your help!! Change like this example? https://codepen.io/Hubba22/pen/BaaERRj Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
CALLINGALLCARS Posted September 4, 2023 Author Share Posted September 4, 2023 On 9/2/2023 at 10:56 PM, tuanphan said: Change like this example? https://codepen.io/Hubba22/pen/BaaERRj YES!!! Exactly like that...but not the background, yet in a code block. The idea is to rotate "banner ads" in a specific code block on a page. Thank you again for your help!! Link to comment
tuanphan Posted September 6, 2023 Share Posted September 6, 2023 On 9/4/2023 at 8:49 PM, BIGMACC68 said: YES!!! Exactly like that...but not the background, yet in a code block. The idea is to rotate "banner ads" in a specific code block on a page. Thank you again for your help!! You can add a Code Block with this code <style> .change-bg { background-position: center; -webkit-background-position: center; -moz-background-position: center; -o-background-position: center; background-repeat: no-repeat; -webkit-background-repeat: no-repeat; -moz-background-repeat: no-repeat; -o-background-repeat: no-repeat; background-attachment: fixed; -webkit-background-attachment: fixed; -moz-background-attachment: fixed; -o-background-attachment: fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } </style> <script> // Get a reference to the body element var body = document.body; // Add the "change-bg" class to the body body.classList.add("change-bg"); // Define a function to change the background function changeBg() { // Array of background URLs var backgrounds = [ "https://images.unsplash.com/photo-1502741338009-cac2772e18bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80", "https://images.unsplash.com/photo-1498557850523-fd3d118b962e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80", "https://images.unsplash.com/photo-1566400628146-ae8f27849e90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" ]; // Find the element with the class "change-bg" var divToChangeBg = document.querySelector(".change-bg"); // Generate a random index to select a background URL var newNumber = Math.floor(Math.random() * backgrounds.length); var randomBackground = backgrounds[newNumber]; // Set the background of .change-bg to a different URL divToChangeBg.style.background = 'url('+backgrounds[newNumber]+')'; } // Call the changeBg function when the window loads window.onload = changeBg; </script> If it works, change image here Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
CALLINGALLCARS Posted September 8, 2023 Author Share Posted September 8, 2023 On 9/6/2023 at 6:03 AM, tuanphan said: You can add a Code Block with this code <style> .change-bg { background-position: center; -webkit-background-position: center; -moz-background-position: center; -o-background-position: center; background-repeat: no-repeat; -webkit-background-repeat: no-repeat; -moz-background-repeat: no-repeat; -o-background-repeat: no-repeat; background-attachment: fixed; -webkit-background-attachment: fixed; -moz-background-attachment: fixed; -o-background-attachment: fixed; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; } </style> <script> // Get a reference to the body element var body = document.body; // Add the "change-bg" class to the body body.classList.add("change-bg"); // Define a function to change the background function changeBg() { // Array of background URLs var backgrounds = [ "https://images.unsplash.com/photo-1502741338009-cac2772e18bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80", "https://images.unsplash.com/photo-1498557850523-fd3d118b962e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80", "https://images.unsplash.com/photo-1566400628146-ae8f27849e90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" ]; // Find the element with the class "change-bg" var divToChangeBg = document.querySelector(".change-bg"); // Generate a random index to select a background URL var newNumber = Math.floor(Math.random() * backgrounds.length); var randomBackground = backgrounds[newNumber]; // Set the background of .change-bg to a different URL divToChangeBg.style.background = 'url('+backgrounds[newNumber]+')'; } // Call the changeBg function when the window loads window.onload = changeBg; </script> If it works, change image here tuanphan - So this did not work. What did work, kinda, is the JS you sent me from codpen : function changeBg() { var backgrounds = ["https://images.unsplash.com/photo-1502741338009-cac2772e18bc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80", "https://images.unsplash.com/photo-1498557850523-fd3d118b962e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80", "https://images.unsplash.com/photo-1566400628146-ae8f27849e90?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80"]; var imgShown = document.body.style.backgroundImage; var newNumber = Math.floor(Math.random()*backgrounds.length); document.body.style.background = 'url('+backgrounds[newNumber]+')'; } window.onload = changeBg; When I mean "kinda worked", the images previewed in "Safe Mode" while editing the page in Squarespace. Once I saved the page, logged out and opened it in another browser there was nothing where the code block is located. I did check to make sure that Javascript is working. Again, I thank you for your time and help! 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