Change image, loop, every half second

Hi Experts,

The title pretty much says it all.

I don't know javascript.  I'm looking for something that will just switch out two images, but and forth on a loop.  If using scriptaculous library is possible that would be an even bigger help.

I'm not looking for anything fancy, or an actual photo gallery, I just need to images to switch back and forth, every .5 second or so, indefinately.

Thanks in advance for the help!

FDM
LVL 9
FDMilwaukeeAsked:
Who is Participating?
 
nap0leonConnect With a Mentor Commented:
The alternate approach:

<html>
<head>
<script>
function flicker(){
  if (document.getElementById("xmas_1").className == "lightson"){
    document.getElementById("xmas_1").className = "lightsoff";
    document.getElementById("xmas_2").className = "lightson";
  }else{
    document.getElementById("xmas_2").className = "lightsoff";
    document.getElementById("xmas_1").className = "lightson";
  }
} 
</script>
<style>
.lightson{display:block;}
.lightsoff{display:none;}
</style>

</head>
<body>
<img src="image1.gif" alt="" id="xmas_1" class="lightson" />
<img src="image2.png" alt="" id="xmas_2" class="lightsoff" />

<script>
window.setInterval("flicker()",500);
</script>
</body>
</html>

Open in new window


I renamed the function "flicker".
Create two new styles, I called them "lightson" and "lightsoff".
Add both images to your page, setting one of them to 'lightson" and the other to "lightsoff".  That way only one of them shows up.
flicker gets called every half second, alternately hiding whichever one is turned on and showing whichever one is turned off.

This will save you from having to use the full URL of the image which will make it run locally and on your production site.
0
 
nap0leonCommented:
Straight Javascript - no plugins or libraries required:

<html>
<body>
<img src="image1.gif" alt="" id="swapMe" />
<script>
function imsgeSwapMe(imgToSwap){
  if (document.getElementById("imgToSwap").src == "image1.gif"){
    document.getElementById("imgToSwap").src="image2.gif";
  }else{
    document.getElementById("imgToSwap").src="image1.gif";
  }
}

window.setInterval("imageSwapMe('swapMe')",1000);

</script>
</body>
</html>

Open in new window

0
 
nap0leonCommented:
sorry - typo fix, and changed it to fire every 0.5 seconds (500 milliseconds), rather than once per second (1000 milliseconds).

<html>
<head>
<script>
function imageSwapMe(imgToSwap){
  if (document.getElementById("imgToSwap").src == "image1.gif"){
    document.getElementById("imgToSwap").src="image2.gif";
  }else{
    document.getElementById("imgToSwap").src="image1.gif";
  }
}
</script>
</head>
<body>
<img src="image1.gif" alt="" id="swapMe" />
<script>
window.setInterval("imageSwapMe('swapMe')",500);
</script>
</body>
</html>

Open in new window

0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
FDMilwaukeeAuthor Commented:
this doesn't seem to be working.  There was a typo in line 5 which I changed (imsgeSwap to imageSwap), but still nothing
0
 
FDMilwaukeeAuthor Commented:
OK I see what you've changed...trying now.
0
 
FDMilwaukeeAuthor Commented:
still not working

here's the link http://jusfilters.com/

The image is the xmas lights
0
 
nap0leonCommented:
bleh - remove the quotes in the function:

function imageSwapMe(imgToSwap){
if (document.getElementById(imgToSwap).src == "../../../../../../../skin/frontend/jusfilters/jusfilters/images/xmas_1.png"){
document.getElementById(imgToSwap).src="../../../../../../../skin/frontend/jusfilters/jusfilters/images/xmas_2.png";
}else{
document.getElementById(imgToSwap).src="../../../../../../../skin/frontend/jusfilters/jusfilters/images/xmas_1.png";
}
} 

Open in new window

0
 
FDMilwaukeeAuthor Commented:
still nothing
0
 
nap0leonCommented:
Looks like when the code is getting the src of the image, it is returning the full URL to the image, rather than just the image name.

To get this to work, you'll need to do a little debugging on your side.

step 1: comment out the window.setInterval line so that it does not run, and replace it with this:
//window.setInterval("imageSwapMe('swapMe')",500);
imageSwapMe('swapMe');

Open in new window


step 2: add an alert to the function so that it shows you the value that it is actually finding, like this:
function imageSwapMe(imgToSwap){
  alert(document.getElementById(imgToSwap).src);
  if (document.getElementById(imgToSwap).src == "../../../../../../../skin/frontend/jusfilters/jusfilters/images/xmas_1.png"){
    document.getElementById(imgToSwap).src="../../../../../../../skin/frontend/jusfilters/jusfilters/images/xmas_2.png";
  }else{
    document.getElementById(imgToSwap).src="../../../../../../../skin/frontend/jusfilters/jusfilters/images/xmas_1.png";
  }
} 

Open in new window


step 3: write down the value that shows up in the alert box

step 4: remove the alert
step 5: change this line to be the value you wrote down in step 3
  if (document.getElementById(imgToSwap).src == "../../../../../../../skin/frontend/jusfilters/jusfilters/images/xmas_1.png"){

Open in new window


step 6: test it (it should swap it once)
step 7: if it works, undo the changes you made in step 1
//window.setInterval("imageSwapMe('swapMe')",500);
imageSwapMe('swapMe');

Open in new window


I'll post an alternate approach in a couple minutes... the alternate approach will not require any debugging on your end.
0
 
FDMilwaukeeAuthor Commented:
That worked like a charm!

Thank you!
0
 
FDMilwaukeeAuthor Commented:
Thank you also nap0leon I'm sure yours would have worked if I spent the time debugging!
0
 
nap0leonCommented:
Glad to help... Apologies for the  confusion.   The alternate approach sometime has drawbacks, like needing to use display: inline instead of display:block or, if the image is large or the client machine is slow, stuff on the page may visibly move during the millisecond that bith images are "off", so I was hesitant to use that method first.
0
 
FDMilwaukeeAuthor Commented:
:) I am discovering that now as I checked in IE.  The page is moving....ughhhh.  Nothings ever simple is it....probably why I enjoy doing it.
0
 
FDMilwaukeeAuthor Commented:
display:inline solved that problem....dang wish I had some points for you.

Thanks again for the help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.