<p align="center">
<button onclick="slideit()">Run the loop</button>
<!-- Start Weather Image Loop -->
<img src="firstcar2.gif" name="slide" width="900" height="500" />
<script type="text/javascript">
<!--
var imagevis1=new Image()
imagevis1.src="http://www.ssec.wisc.edu/data/us_comp/big/image1.jpg"
var imagevis2=new Image()
imagevis2.src="http://www.ssec.wisc.edu/data/us_comp/big/image2.jpg"
var imagevis3=new Image()
imagevis3.src="http://www.ssec.wisc.edu/data/us_comp/big/image3.jpg"
var imagevis4=new Image()
imagevis4.src="http://www.ssec.wisc.edu/data/us_comp/big/image4.jpg"
var imagevis5=new Image()
imagevis5.src="http://www.ssec.wisc.edu/data/us_comp/big/image5.jpg"
var imagevis6=new Image()
imagevis6.src="http://www.ssec.wisc.edu/data/us_comp/big/image6.jpg"
var imagevis7=new Image()
imagevis7.src="http://www.ssec.wisc.edu/data/us_comp/big/image7.jpg"
var imagevis8=new Image()
imagevis8.src="http://www.ssec.wisc.edu/data/us_comp/big/image8.jpg"
var imagevis9=new Image()
imagevis9.src="http://www.ssec.wisc.edu/data/us_comp/big/image9.jpg"
var imagevis10=new Image()
imagevis10.src="http://www.ssec.wisc.edu/data/us_comp/big/image10.jpg"
var imagevis11=new Image()
imagevis11.src="http://www.ssec.wisc.edu/data/us_comp/big/image11.jpg"
var imagevis12=new Image()
imagevis12.src="http://www.ssec.wisc.edu/data/us_comp/big/image12.jpg"
var imagevis13=new Image()
imagevis13.src="http://www.ssec.wisc.edu/data/us_comp/big/image13.jpg"
var imagevis14=new Image()
imagevis14.src="http://www.ssec.wisc.edu/data/us_comp/big/image14.jpg"
var imagevis15=new Image()
imagevis15.src="http://www.ssec.wisc.edu/data/us_comp/big/image15.jpg"
var imagevis16=new Image()
imagevis16.src="http://www.ssec.wisc.edu/data/us_comp/big/image16.jpg"
var imagevis17=new Image()
imagevis17.src="http://www.ssec.wisc.edu/data/us_comp/big/image17.jpg"
var imagevis18=new Image()
imagevis18.src="http://www.ssec.wisc.edu/data/us_comp/big/image18.jpg"
var imagevis19=new Image()
imagevis19.src="http://www.ssec.wisc.edu/data/us_comp/big/image19.jpg"
var imagevis20=new Image()
imagevis20.src="http://www.ssec.wisc.edu/data/us_comp/big/image20.jpg"
var imagevis21=new Image()
imagevis21.src="http://www.ssec.wisc.edu/data/us_comp/big/image21.jpg"
var imagevis22=new Image()
imagevis22.src="http://www.ssec.wisc.edu/data/us_comp/big/image22.jpg"
var imagevis23=new Image()
imagevis23.src="http://www.ssec.wisc.edu/data/us_comp/big/image23.jpg"
var imagevis24=new Image()
imagevis24.src="http://www.ssec.wisc.edu/data/us_comp/big/image24.jpg"
var imagevis25=new Image()
imagevis25.src="http://www.ssec.wisc.edu/data/us_comp/big/image24.jpg"
//-->
</script>
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("imagevis"+step+".src")
if (step<25)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
if (step<25)
{
setTimeout("slideit()",100)
}
else
{
setTimeout("slideit()",1500)
}
}
slideit()
//-->
</script>
<!-- End Weather Image Loop -->
</p>
I am trying to load this script with the click of a button, but when I place the lower script in a function, and load it with the button, it does not start the loop. For whatever reason, it sometimes says that slideit() is not defined, or that the first image (imagevis1) is not defined.
Thank you for your help!
The reason why yours is not working is the fact you never removed the slide() call which starts it off. You would need to remove that and the code would work with the button click.
setTimeout("slideit()",1500)
}
}
slideit() <-- REMOVE THIS LINE
//-->
</script>
<!-- End Weather Image Loop -->
But the code has other issues. I wrote this rather quick, but this is a little better than what you have. The preload could be done differently if they are not loading in time.
HTML :
<img src="" id="slideshow" />
<button id="btn">Animate</button>
JavaScript:
(function () {
var srcStart = "http://www.ssec.wisc.edu/data/us_comp/big/image",
srcEnd = ".jpg",
start = 1,
end = 24,
current = start,
shortDelay = 100,
longDelay = 1500,
elem = document.getElementById("slideshow"),
btn = document.getElementById("btn"),
isPreload = true;
function next() {
var delay = shortDelay;
elem.src = srcStart + current + srcEnd;
current++;
if(current!==end) {
var img = new Image();
img.src = srcStart + (current+1) + srcEnd;
}
if(current>end) {
current = start;
delay = longDelay;
}
window.setTimeout(next,delay);
}
btn.onclick = next;
})();
Example:
http://jsfiddle.net/L7qUY/
Make sure you don't have the function slideit() defined inside your wrapper function.
//variable that will increment through the images
var step=1;
function slideit(){
//if browser does not support the image object, exit.
if (!document.images) {
return;
}
document.images.slide.src=eval("imagevis"+step+".src");
if (step<25) {
step++;
} else {
step=1;
}
//call function "slideit()" every 2.5 seconds
if (step<25) {
setTimeout("slideit()",100);
} else {
setTimeout("slideit()",1500);
}
}
var button = document.getElementById("YourButtonID");
button.addEventListener("click", slideit);
You need the image tag named slide because your javascript uses that attribute to target the image tag to update document.images.slide.src=eval("imagevis"+step+".src");.
Also make sure that your setTimeout methods have the times you intend. Your comment says you want to call slideit() every 2.5 seconds but your calls are using 100 and 1500 milliseconds which is .1 and 1.5 seconds respectively.
I'm guessing you are trying to write an animation or something.
html
<img src='http://www.ssec.wisc.edu/data/us_comp/big/image1.jpg' id="weatherImg" width="400" />
<input type="button" id="animate" onclick="animate()" value="tiempo" />
JavaScript
currImg=0;
images = [
"http://www.ssec.wisc.edu/data/us_comp/big/image1.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image2.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image3.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image4.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image5.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image6.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image7.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image8.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image9.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image10.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image11.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image12.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image13.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image14.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image15.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image16.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image17.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image18.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image19.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image20.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image21.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image22.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image23.jpg"
,"http://www.ssec.wisc.edu/data/us_comp/big/image24.jpg"
//,"http://www.ssec.wisc.edu/data/us_comp/big/image25.jpg"
];
aniClock = 0;
animate = function(){
clearTimeout(aniClock);
if (typeof images[currImg] == "undefined"){
//alert('ho');
//return false;
currImg = 0;
}
document.getElementById("weatherImg").src = images[currImg];
currImg++;
aniClock = setTimeout(function(){animate();},300);
}
Example
http://jsfiddle.net/chepe263/bVye6/
Related
I'm making a slideshow in javascript for a class assignment and I have the slideshow working but it's not displaying the images. I can see that the image icon changes but the actual image is not showing.
<script type="text/javascript">
//put images in array
var pics = new Array();
pics[0] = new Image();
pics[0].src = "images/forest.jpg";
pics[1] = new Image();
pics[1].src = "images/mountains.jpg";
pics[2] = new Image();
pics[2].src = "images/nature.jpg";
pics[3] = new Image();
pics[3].src = "images/snowtops.jpg";
var index = 0; //start point
var piclength = pics.length - 1;
function slideshow() {
document.slide.src = pics[index];
if (index < piclength) {
index++;
}
else {
index = 0;
}
}
function slide() {
setInterval(slideshow, 3000);
}
</script>
<body onload="slide()">
<h1>Nature Photography</h1>
<main>
<section>
<p>I am an enthusiastic about nature photography. Here is a slideshow of my
works.</p>
<aside> <img id="myImage" src="images/forest.jpg" name="slide" width="95%">
</aside>
First, I would put the script tag after your HTML. This will allow you to cache DOM elements without waiting for the "DOMContentLoaded" event or the "load" (window) event to be fired.
Second, you should cache the "myImage" element. Something like const slider = document.getElementById('myImage').
Third, check your console. Maybe your image URLs are wrong? And make sure your HTML is valid. From what you posted, you are missing a lot of things (doctype, html/head tags, you didn't close body tag and similar)
I need to on the click of the first image, for it to switch to the second image, and then on the click of that to switch to the third image and so on and so on.
I have this so far, and it only goes to the second image and stops there, or goes instantly to the third...
<img id="imgClickAndChange" class="art_shop" name="pic" src="images/edited_images/1.jpg" style="display: none;" onClick="changeImage();changeImageAgain();">
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src = "images/edited_images/1.jpg")
{
document.getElementById("imgClickAndChange").src = "images/edited_images/2.jpg";
}
}
</script>
<script language="javascript">
function changeImageAgain() {
if (document.getElementById("imgClickAndChange").src == "images/edited_images/2.jpg")
{
document.getElementById("imgClickAndChange").src = "images/edited_images/3.jpg";
}
}
</script>
I have also this example, which i pulled from another thing i did a while ago. It's an image slider, with the images already stored in the header, and they load the new image in every X seconds. Is there any way to modify this to load the next image on the click of a button (or the image itself) as opposed to it being timed? Either solution would work. Thanks
<head>
<script type="text/javascript">
var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "images/edited_images/1.jpg" // set image src property to image path, preloading image in the process
slideimages[1] = new Image()
slideimages[1].src = "images/edited_images/2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "images/edited_images/3.jpg"
slideimages[3] = new Image()
slideimages[3].src = "images/edited_images/4.jpg"
</script>
</head>
<img id="imgClickAndChange" class="art_shop" name="pic" src="images/edited_images/1.jpg" style="display: none;" onClick="changeImage();changeImageAgain();">
<script type="text/javascript">
//variable that will incement through the images
var step=0
function slideit(){
if (!document.images)
return
document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step<1)
document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step<2)
document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step<3)
step++
else
step=0
setTimeout("slideit()",1000)
}
slideit()
</script>
You can make it much simpler. Also I would not recommend preloading the images as it slows down your pageload.
Try this:
EDIT: without looping
<img id="imgClickAndChange" class="art_shop" name="pic" onClick="changeImage()">
<script>
// image sources in array. image[0] will have first image src, image[3] will have last src
var images = [
"images/edited_images/1.jpg",
"images/edited_images/2.jpg",
"images/edited_images/3.jpg",
"images/edited_images/4.jpg"
]
var step = 0;
changeImage(); // set first image src after page loads
function changeImage() {
// exit if no images, or step = number of items in array (4)
if (typeof images == "undefined" || step == images.length) return;
document.getElementById('imgClickAndChange').src = images[step];
step++;
}
</script>
I am creating a website for my school project. I want to put some pictures in a slide show, but for some reason my code isnt working. Here is my code
<div class="row">
<div class="col-md-12">
<h3 class = "Contains">
<script type = "text/javascript">
var image1= new image()
image1.src=images/truck1.png
var image2= new image()
image2.src=images/truck4.png
var image3= new image()
image3.src=images/truck7.png
</script>
<img src="images/truck1.PNG" name = "slide" width ="400" height ="400">
<script>
var step =1;
function slideit(){
document.images.slide.src=eval("image"+step+".src");
if (step<3)
step++;
else
step=1;
setTimeout("slideit()", 2500);
}
slideit()
</script>
</h3>
</div>
A very basic and simple example of how you can step through an array
//Array of images
var Images = ['https://dummyimage.com/100x100/000/fff.jpg',
'https://dummyimage.com/200x200/000/fff.jpg',
'https://dummyimage.com/300x300/000/fff.jpg'
];
//Step counter
var step = 1;
function gallery() {
//change image
document.getElementById('Imgs').src = Images[step];
//Or you can use - document.images.slide.src=Images[step];
// is step more than the image array?
if (step < Images.length - 1) {
// No - add 1 for next image.
step++;
} else {
// Yes - Start from the first image
step = 0;
}
}
//When the ready, set interval.
window.onload = setInterval(gallery, 2500);
<img id="Imgs" name="slide" src="https://dummyimage.com/100x100/000/fff.jpg" />
The method you're trying will return the following errors in the browser console.
Uncaught ReferenceError: image is not defined(anonymous function)
Uncaught TypeError: Cannot read property 'src' of undefined
The browser console is your best friend when it comes to using javascript.
If you have any questions, please leave a comment below and I will get back to you as soon as possible.
If you want to stick with the same method here it is:
var step = 1;
var image1 = new Image();
image1.src = "https://dummyimage.com/100x100/000/fff.jpg";
var image2 = new Image();
image2.src = "https://dummyimage.com/200x200/000/fff.jpg";
var image3 = new Image();
image3.src = "https://dummyimage.com/300x300/000/fff.jpg";
function slideit() {
document.images.slide.src = window['image' + step].src;
if (step < 3)
step++;
else
step = 1;
setTimeout(slideit, 2500);
}
slideit();
<div class="row">
<div class="col-md-12">
<h3 class="Contains">
<img src="https://dummyimage.com/100x100/000/fff.jpg" name="slide" />
</h3>
</div>
I hope this helps. Happy coding!
Your problem is most probably in your "imagex.src=xxxxxxx". The images urls are string and must be quoted as such. So it should be :
image1.src="images/truck1.png"
Also, you try to call setTimeout with a string instead of a function reference/name. It should be :
setTimeout(slideit, 2500);
However, a setInterval would be best here instead of a setTimeout as it will call a function repetingly.
JS aside, there are some quirk in the HTML part. Mostly, you shouldn't use a H3 to wrap a div. H3 are ususaly used for page sub-titles, not for a 400x400 images ^^
As mentioned in your question comments, using eval is generaly a bad idea.
To Simplify, you could do something like this :
<div class="row">
<div class="col-md-12">
<div class="Contains">
<img src="images/truck1.PNG" name="slide" width="400" height="400">
<script>
var pictures = ["images/truck1.png",
"images/truck4.png",
"images/truck7.png"];
var step = 0;
function slideIt(){
if (step<3)
step++;
else
step=0;
document.images.slide.src=pictures[step];
}
setTimeout(slideit, 2500);
</script>
</div>
</div>
</div>
I am trying to make a responsive slider for mobile version.
Site was developed using angular JS.
When I am trying to integrate the JQuery sliders, total site was distubing because of Bootstrap CSS file.
So, in that part I founded a plain Javascript code. And in this how to make those images responsive.
Below I am adding the code.
<head>
<script type="text/javascript">
var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "images/slide/1.jpg" // set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "images/slide/2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "images/slide/2.jpg"
</script>
</head>
<body>
<img src="firstcar.gif" id="slide" width=100 height=56 />
<script type="text/javascript">
//variable that will increment through the images
var step = 0
var whichimage = 0
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
whichimage = step
if (step<2)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
function slidelink(){
if (whichimage == 0)
window.location = "#"
else if (whichimage == 1)
window.location = "#"
else if (whichimage == 2)
window.location = "#"
}
slideit()
</script>
Previous answers are correct but you have to use $ for jQuery:
$(slideimages[0]).addClass("img-responsive");
WIthout jQuery:
slideimages[0].className += "img-responsive";
To add a class, just use addClass:
slideimages[0].addClass("img-responsive");
Are you just trying to add a class? I don't quite understand your question.
EDITED you simply need to do this:
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
document.getElementById('slide').className = "img-responsive";
whichimage = step
if (step<2)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
i tried this code.. but when the image changes it is not displayed properly..
alt image(a small broken image is displayed)..
i tried putting var step=1; before the function as global variable.. But still it does not work.. I even tried document.images.slide.src = "images/pentagg.jpg";
<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "images/pentagg.jpg"
var image2 = new Image()
image2.src = "images/promo.jpg"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
function slideit()
{
var step=1;
document.images.slide.src = eval("image"+step+".src")
if(step<2)
step++
else
step=1
setTimeout("slideit()",2500)
}
slideit()
</script>
</body>
There's something wrong you did. You made the step variable available inside slideit() function only by declaring it as a local variable. So everytime the function is being called using setTimeOut a new step variable is created. That causes never to change your initial image.
And I prefer this as the appropriate way to call the slideit function using setTimeOut
setTimeout(function(){slideit()},2500);
That's it. Here's the full code :
HTML :
<img src="http://picpuddle.com/wp-content/uploads/2014/06/cute-cartoons-21.jpg" width="500" height="300" name="slide" />
javaScript :
var step=1;
var image1 = new Image();
image1.src = "http://picpuddle.com/wp-content/uploads/2014/06/cute-cartoons-21.jpg";
var image2 = new Image();
image2.src = "http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg";
function slideit()
{
//This looks better though
//document.getElementsByName("slide")[0].src = eval("image"+step+".src");
document.images.slide.src = eval("image"+step+".src");
if(step<2)
step++;
else
step=1;
setTimeout(function(){slideit()},2500);
}
slideit();
jsFiddle
you can't pass the image variable as an argument like that. it's taking a string called "image1.src".
try putting them in an array then getting the index with your step variable.