Setting An Image Src Via Javascript

Design help Custom code
1

Does setting an image src via javascript not work?

I’ve tried the following code embedded before and although I can GET the image src, it will never SET it.

var i = 0; // Start Point
var splashImageList = ; // Images Array
var time = 3000; // Time Between Switch

// Image List
splashImageList[0] = “https://uploads-ssl.webflow.com/5914c989e2cc1e3821627ac5/6358363fc78ba105e4f0906e_Splash_JC120.png”;
splashImageList[1] = “https://uploads-ssl.webflow.com/5914c989e2cc1e3821627ac5/6358363f7fc70b112e082c94_Splash_Classic.png”;
splashImageList[2] = “https://uploads-ssl.webflow.com/5914c989e2cc1e3821627ac5/6358363f26359257a2a022dc_Splash_6505.png”;
splashImageList[3] = “https://uploads-ssl.webflow.com/5914c989e2cc1e3821627ac5/6358363e05580955df45bfe7_Slash_Demon.png”;

// Change Image
function changeImg(){
document.getElementById(“splashImg”).src = splashImageList[i];

// Check If Index Is Under Max
if(i < splashImageList.length - 1){
  // Add 1 to Index
  i++; 
} else { 
	// Reset Back To O
	i = 0;
}

// Run function every x seconds
setTimeout("changeImg()", time);

}

// Run function when page loads
window.onload=changeImg;

Thanks in advance.

2

hi @Scott_Mire you can try this simple example

let splashImageList = [
  "https://uploads-ssl.webflow.com/5914c989e2cc1e3821627ac5/6358363fc78ba105e4f0906e_Splash_JC120.png",
  "https://uploads-ssl.webflow.com/5914c989e2cc1e3821627ac5/6358363f7fc70b112e082c94_Splash_Classic.png",
  "https://uploads-ssl.webflow.com/5914c989e2cc1e3821627ac5/6358363f26359257a2a022dc_Splash_6505.png",
  "https://uploads-ssl.webflow.com/5914c989e2cc1e3821627ac5/6358363e05580955df45bfe7_Slash_Demon.png",
];
let idx = 0;
let isCurrentSrc = "";

const myFunction = () => {
  isCurrentSrc = splashImageList[idx];
  idx += 1;
  if (idx > splashImageList.length) {
    idx = 0;
  }
//  console.log(isCurrentSrc);
};

setInterval(myFunction, 3000)
3

I have made for you working example with extra bits to have something to start with.

Hope this will solve your request

4

Thanks for the reply!!
I tried your code…but Webflow seems to not allow you to set the image src. It gets it, but won’t set it. I know the code is right, but it just doesn’t work in Webflow.

5

Hey Scott, not sure what you’re talking about.
Of course you can update an image src with script, and it’s super easy.

Client-side script has nothing to do with Webflow, anyway, Your scripts execute in the browser after Webflow has delivered the page. It’s not involved.

Share your read-only project link and a link to your published site ( webflow.io is fine ), and we’ll have a look.

6

ok then @Scott_Mire here is simple example in WF.

Read-Only

Live Preview

PS: you can just use any slider for that , even WF prediefined.

7

I finally figured out what the problem was…

The image src and alt were, in fact, being changed, but the image was set to “responsive” in Webflow and thus the image source set was included and NOT being changed. By unchecking the “responsive” option in Webflow, the image is then determined by the src, not the srcset.

Thanks so much to everyone for the help! You are awesome!

8

jhi @Scott_Mire if issue doesn’t persist feel free to close your request as solved.