Develop Reference

Javascript image slideshow using a for loop

i'm trying to cycle through 3 images using a for loop in javascript. Here is my code:
<img name="slide" width="300" height="300">
var i=0;
var images = [];
images[0] = "images/1.jpg";
images[1] = "images/2.jpg";
images[2] = "images/3.jpg";
function changeImage () {
for(i=0; i < images.length; i++) {
document.slide.src = images[i];
}
}
window.onload = changeImage;
Currently, only image 3 is displayed. Anyone know what i'm doing wrong here?

Yes - this is because your for loop run finishes instantly so there's no time for slides 1 and 2 to be shown.
Give this a try:
var currentImage = 0,
images = [
"https://unsplash.it/200/300?image=100",
"https://unsplash.it/200/300?image=101",
"https://unsplash.it/200/300?image=102"
];
function initSlideshow() {
setImage(0);
setInterval(function(){
nextImage();
},1000);
}
function nextImage() {
if(images.length === currentImage + 1){
currentImage = 0;
} else {
currentImage++;
}
setImage(currentImage);
}
function setImage(image) {
document.querySelectorAll('.slide')[0].src = images[image];
}
window.onload = initSlideshow();
Example: https://jsfiddle.net/vvbdwazc/

Currently, only image 3 is displayed. Anyone know what i'm doing wrong
here?
it's all being displayed but the reason why you can only see the 3rd image is because you're not pausing for a certain time before displaying the next image hence it seems like it's not working.
use setInterval() method to show each image after a specified time.
Example:
var i=0;
var images = [];
images[0] = "images/1.jpg";
images[1] = "images/2.jpg";
images[2] = "images/3.jpg";
function changeImage () {
for(i=0; i < images.length; i++) {
document.slide.src = images[i];
}
}
var myVar = setInterval(function(){ changeImage() }, 1000);
You may later wish to prevent the setInterval() method from executing any longer in that case have a look at clearInterval().

window.onload = changeImage; tells me you want to change the image on page load event? In other words, the image changes only upon page load (or refresh).
Since state is not maintained by default (eg local storage or session storage or cookies) your best bet would be to use a random generator to choose randomly. See Generating random whole numbers in JavaScript in a specific range?

This is because the for works so fast it gets quickly to the third image. You could use instead some setInterval like this:
<img id="slide" width="300" height="300">
<script>
var images = [];
images[0] = "images/1.jpg";
images[1] = "images/2.jpg";
images[2] = "images/3.jpg";
var i = 0;
setInterval(function() {
var slide = document.querySelector("#slide"); //Select the img element by ID
slide.src = images[i++];
if(i > images.length - 1)
i = 0;
}, 1000); //Time in milliseconds
</script>
This will change constantly back to the first image when it reaches the last one.
Edit: Forgot to mention. setInterval works like a "repeater", it will work indefinitely until you clear it. To clear it you need to asign it to a variable and then use clearInterval passing the variable.
var interval = setInterval(function(){}, 1000) //example
clearInterval(interval);
Like so.

Pre-loading images with Javascript | Not Working

I have a masonry grid where the images are black and white and when you hover over them, the color images appear. They are not composite images. They are all separate. (I'm just sorting out bugs for someone else's code)
On initial hover after a fresh page load, there is a delay (and grey overlay) when hovering over. After the initial, it's of course instantaneous when it switches to the color photo.
So what I'm trying to do is pre load the images with some javascript, but I'm having trouble doing this. Below is what I have for code. Also, this is in Wordpress. Not sure if that matters.
All of the images are background images too, not hardcoded into the html. It's all background css. Thanks for any help!
<script language="JavaScript">
$('document').ready(function preloader() {
// counter
var i = 0;
// create object
imageObj = new Image();
// set image list
images = new Array();
images[0]="images/treatment_locations.jpg"
images[1]="images/community_news_events.jpg"
images[2]="images/success_stories.jpg"
images[3]="images/self_assessment.jpg"
images[4]="images/our_associates.jpg"
images[5]="images/treatment_programs.jpg"
images[6]="images/patient_portal.jpg"
images[7]="images/FAQ.jpg"
images[8]="images/what_to_expect.jpg"
// start preloading
for(i=0; i<=8; i++)
{
imageObj.src=images[i];
}
});
</script>

If you overwrite the src in each iteration, you're not giving the browser a chance to fetch the image. You probably only preload the last image.
Try:
var imageObjs = [];
$('document').ready(function preloader() {
// counter
var i = 0;
// set image list
images = new Array();
images[0]="images/treatment_locations.jpg"
images[1]="images/community_news_events.jpg"
images[2]="images/success_stories.jpg"
images[3]="images/self_assessment.jpg"
images[4]="images/our_associates.jpg"
images[5]="images/treatment_programs.jpg"
images[6]="images/patient_portal.jpg"
images[7]="images/FAQ.jpg"
images[8]="images/what_to_expect.jpg"
// start preloading
for(i=0; i<=8; i++)
{
var imageObj = new Image();
imageObj.src=images[i];
imageObjs.push(imageObj);
}
});

That's another aproach, where it stores only the images that were successfully loaded.
var imgObjs = [];
$(document).ready(function preloader() {
// images list
var images = [
'treatment_locations.jpg',
'community_news_events.jpg',
'success_stories.jpg',
'self_assessment.jpg',
'our_associates.jpg',
'treatment_programs.jpg',
'patient_portal.jpg',
'FAQ.jpg',
'what_to_expect.jpg'
];
for (var i in images) {
var img = new Image();
img.src = 'images/' + images[i];
// stores it on array after loading
img.onload = function() {
imgObjs.push(this);
};
}
});

JavaScript: Constantly Switch image source

My end goal is pretty simple. Once a page loads, I want an image to appear, but I want it to be constantly switching. (Ultimately, to make a fish look like it's bobbing up and down).
Right now my code looks like this:
var myFish = new Image();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
myFish.onload = function(){
context.drawImage(myFish, 100, 30, 200, 137);
};
myFish.src = "img/fish.png";
I'm not using JQuery, just straight javascript. How could I constantly switch back and forth between this image, and another image saved in the same directory.
Thank you!

You'll need to use the timer functions
function updateImageSrcHere()
{
//Update Image src
}
//Interval is measured in MS so 1000 = 1 second
var interval = 1000;
setInterval(updateImageSrcHere, interval);

using onmouseover as

I have a continuous loop of alternating images that I would like to be able to interrupt and have display a new picture that corresponds with the current displayed picture using an onmouseover affect for as long as the mouse is on the image.
As an example to better describe my problem, I would like to have a bunch of images alternating on the screen every five seconds (which I can already do). Then when the mouseover event happens, have the images stop alternating and have a new image displayed that corresponds with the image that was just displayed (it will be another image that describes the image that was just being displayed). I also want the images to stop alternating while the mouse is over the images.
So far I can get the first image to display its corresponding image, but I can't seem to get the rest to work. Also I can't get the alternating images to stop while the mouse is still on the image.
Here's what I have so far:
<body>
<img src="image1.jpeg" alt="Image1" width="344" height="311" id="rotator" onmouseover="this.src='imageText1.jpeg'" onmouseout="this.src='image1.jpeg'">
<script type="text/javascript">
(function() {
var rotator = document.getElementById("rotator");
var imageDir = '';
var delayInSeconds = 5;
var images = ["image2.png", "image3.gif", "image4.png", "image5.jpeg","image6.gif", "image7.jpeg", "image1.jpeg"];
var num = 0;
if (rotator.onmouseover == )
var changeImage = function() {
var len = images.length;
rotator.src = imageDir + images[num++];
if (num == len) {
num = 0;
}
};
setInterval(changeImage, delayInSeconds * 1000);
})();
</script>

if (rotator.onmouseover == )
{
}
we must check something in if conditon.
empty condition is a problem.please check it.

Change pre-defined body background image

I found this script to change the body's background image when you click a link. It works, great except the only problem is is that I cannot have a pre-defined bg image in the css or else it won't change.
So I remove the css for the background image and it switches the images fine, but I want an image to be default to start with.
Script:
<script language="JavaScript">
<!--
var backImage = new Array(); // don't change this
backImage[0] = "images/bg0.png";
backImage[1] = "images/bg1.png";
backImage[2] = "images/bg2.png";
backImage[3] = "images/bg3.png";
backImage[4] = "images/bg4.png";
backImage[5] = "images/bg5.png";
function changeBGImage(whichImage){
if (document.body){
document.body.background = backImage[whichImage];
}
}
//-->
</script>
Link:
Change2
And, for example, I want bg0.png to be the background by default when the page loads.
It would also be great if it was possible to fade between the bg images.
Thanks in advance.

Keep the background in the CSS, and use this code instead
var backImage = [
"images/bg0.png",
"images/bg1.png",
"images/bg2.png",
"images/bg3.png",
"images/bg4.png",
"images/bg5.png"
];
function changeBGImage(whichImage) {
if (document.body){
document.body.style.backgroundImage = 'url('+backImage[whichImage]+')';
}
}

To change the background if you have one defined in the css you need to alter: document.body.style.backgroundImage attribute