How change some images when user refresh the website?

Design help Custom code
1

Please help me to automatically change some images every time the user refreshes the website.
Like this website: https://weareunder.design/
whenever someone refreshes the website, the background images will be change automatically

I already try this: Change background image on refresh
but nothing work, I already change the class (the original class: slider-class to the same class as the images placeholder i want to change). and try to nest the code on , but nothing work.

Thanks,

2

Could you post your read only link of your site? This will help someone look into it on your site. :+1:

4

Hi @sfebriant,

You could use a JavaScript random method and a set of image url stored into an array to accomplish what you want. I’ve quickly build a codepen for you. You just need to replace the values in the array by the url of your images.

codepen

HTML
<img id="target" src="a.jpg">

JavaScript

document.addEventListener("DOMContentLoaded", () => {
  const log = console.log,
    array = ["a", "b", "c"],
    random = Math.floor(Math.random() * array.length),
    target = document.getElementById("target");
  target.src = `${array[random]}`;
  log(target);
});

Hope that helps.

1 Like
5

Hi @anthonysalamin

Thank you so much for the help, however when I tried to use it, the Images will come out in a sec and then gone, maybe there is something wrong about the how I use your code? (you can check the link above I share to take a look at the website)

6

right now your array reads: array = ["mobile-2", "dashboard-2"] those are not proper image URL. You need to copy paste the exact url of the webflow hosted images you’d like to use.

1 Like
7

do you mean this? (sorry I’m not a developer, so I just know a little a bit about the code)

https://uploads-ssl.webflow.com/5f783f39c6adaf004c07d73f/5f7f26f15d147d0556e4e198_dashboard-2.svg

8

Hi @anthonysalamin

It’s working, thank you…

9

by the way, do you know how to make it 50% of the load?
I mean, the probability to change isn’t random, but 50%
so everytime the user refresh, it will refresh…

@anthonysalamin

10

What do you mean by 50% of the load ?

11

I mean every time the user refreshes pages, the images will always change.
cause the current images to change is random.

Is it possible?

12

yes you could use the js.cookies API to set and get cookies. You can setup a cookie with the value of the URL of the image being displayed so that next time the user reload the page, the script will show the other url than the one that was previously saved.

1 Like
13

Thank you so much, you save my day!
by the way, how if I want to add another image element in the same pages that have a trigger like above (change the images every time the website refreshes) and the probability to change the images,

Is it use the js.cookies. too ?

14

If you want to have multiple component with images being switched on each page load, you can target class instead of id in the JavaScript snipet.

15

Thank you so much for helping till the end.
You are the best! hope the best for you! :grin::grin:

1 Like
16

Hi Seto,

Would you be able to include a read-only link for your site? I’m trying to achieve this too, would really appreciate being able to take a look at what you did!

Thank you :slight_smile: Valeria

17

Hi @valepop , sorry, I can’t share it with you again, cause it’s on client’s account and I already deliver it to them, hope you can find your answer.

18

thank you anyways! I think i figured it out the hard way, I appreciate your help and sharing your project :slight_smile: take care and best of luck!