Jump to content

Changing images upon page refresh in a Code Block

Recommended Posts

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
  • Replies 8
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

On 8/24/2023 at 6:02 PM, BIGMACC68 said:

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

image.thumb.png.a12647571479405fb3c3bf58700cdc1c.png

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

image.thumb.png.ac8228920cd377113abb60f3b983e06d.png

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

image.thumb.png.ac8228920cd377113abb60f3b983e06d.png

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

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.