I want to control this slideshow to start/stop using onclick on #mainImage. At this point, I can get the slides to stop, but I'm stuck on the logic for how to use onclick to start it again. Ideally, I want the slideshow to continue from the array position where it left off as opposed to starting over completely. My instinct tells me this could be solved with some conditional statements, but I just can't get it to work. Thanks for any feedback!
//Grab img
var mainImage = document.getElementById("mainImage");
//Create image array
var imageArray = ["images/drifter.jpg","images/drifter3.jpg","images/drifter4.jpg"];
//Set up array index
var imageIndex = 0;
//Create function to cycle through images
function changeImage() {
mainImage.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if(imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
//Call cycle function
var intervalHandle = setInterval(changeImage,3000);
mainImage.onclick = function () {
clearInterval(intervalHandle);
}
Add a flag to know when it stopped and when should continue
//Grab img
var mainImage = document.getElementById("mainImage");
//Create image array
var imageArray = ["images/drifter.jpg","images/drifter3.jpg","images/drifter4.jpg"];
//Set up array index
var imageIndex = 0;
// here the flag
var stop = false;
//Create function to cycle through images
function changeImage() {
mainImage.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if(imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
//Call cycle function
var intervalHandle = setInterval(changeImage,3000);
mainImage.onclick = function () {
if(!stop){
clearInterval(intervalHandle);
stop = true;
} else {
intervalHandle = setInterval(changeImage,3000);
stop = false;
}
}
Related
I have a countdown who will display a new piture every 5 secondes >> it approximatively work, but at the end of the array composed by 10 pictures, I am not able to stop countdown + stop to display picture with the clearInterval...
My script
<script>
var myImage = document.getElementById ("mainImage");
var imageArray = ["img/lunge.png",
"img/plank.png",
"img/push-up-and-rotation.png",
"img/push-up.png",
"img/side-plank-left.png",
"img/side-plank-right.png",
"img/squat.png",
"img/step-up-onto-chair.png",
"img/triceps-dip-on-chair.png",
"img/wall-sit.png"]
var imageIndex = 0;
$(document).ready(function () {
$('#submit').click(function () {
$('.timer').circularCountDown()
var inter = setInterval (changeImage, 5000);
function changeImage () {
myImage.setAttribute ("src", imageArray [imageIndex]);
document.getElementById("circle").innerHTML = "";
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex =0;
}
$('.timer').circularCountDown()
}
function stopinter () {
clearInterval (inter);
}
})
})
</script>
Any idea about how to do of improve my script ?
Thank you,
Olivier
imageIndex++;
if (imageIndex >= imageArray.length) {
stopinter();
}
Finaly, I make it work with this solution :
$('.timer').circularCountDown()
for (;i==10;i++) {
clearInterval (inter);
}
So I used two images and setInterval to change two pictures continuously over time. When I click on the picture, I will use clearInterval to freeze the image. My question is how do I make the two images change continuously again when I click on it? So it's like a on and off like of scenario. Below is the code which makes the two pictures change continuously and when I click on it, the image freezes and do not change between themselves.
var imageArray = ["_images/korea.jpg","_images/images.jpg"];
var imageIndex = 0;
function changeImage(){
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if(imageIndex >= imageArray.length){
imageIndex = 0;
}
}
var test = setInterval(changeImage, 1000);
myImage.onclick = function(){
clearInterval(test);
}
Instead of clearInterval, use Boolean flag and invert it on click of the image
var imageArray = ["_images/korea.jpg", "_images/images.jpg"];
var imageIndex = 0;
var flag = true;
function changeImage() {
if (flag) {
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
}
setInterval(changeImage, 1000);
myImage.onclick = function() {
flag = !flag;
}
Or you can re-initiate setInterval
var imageArray = ["_images/korea.jpg", "_images/images.jpg"];
var imageIndex = 0;
var interval;
var clicked = false;
function changeImage() {
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
interval = setInterval(changeImage, 1000);
myImage.onclick = function() {
if (!clicked) {
clearInterval(interval);
clicked = true;
} else {
interval = setInterval(changeImage, 1000);
clicked = false;
}
}
Have a boolean variable to decide if you are going to change the image. Set or reset this boolean variable when you click on the image without clearing the interval.
var active = true;
myImage.onclick = function(){
active = !active;
}
function changeImage(){
if (!active)
return;
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if(imageIndex >= imageArray.length){
imageIndex = 0;
}
}
This might help you :)
<img src="img1.png" id="cimg" onclick="trigger()">
<script>
var imageArray = ["img1.png","img2.png"];
var imageobject = document.getElementById("cimg");
var imagecount = -1;
var changable = true;
function changeimage() {
imagecount++
if(imagecount < imageArray.length) {
imageobject.src = imageArray[imagecount];
}
else {
imagecount = -1;
}
}
function loop() {
if(changable) {
changeimage();
setTimeout(function() { loop(); },1000)
}
}
loop();
function trigger() {
if(changable) {
changable = false;
}
else {
changable = true;
loop();
}
}
</script>
This answer is different to the others because it clears the timer, as opposed to just checking if the flag is set. Your changeImage action stays the same.
var flag = false, timer;
function changeAction() {
if (flag) {
clearInterval(timer);
} else {
timer = setInterval(changeImage, 1000);
}
flag = !flag;
}
changeAction();
myImage.onclick = changeAction;
I'm trying to create an event that changes the picture on mouse over.
var myImage = document.getElementById("mainImage");
var imageArray = ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg",
"_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"];
var imageIndex = 0;
mainImage.mousover = function changeImage() {
myImage.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
// setInterval is also in milliseconds
mainImage.mousover = function () {
var intervalHandle = setInterval(changeImage,1000);
}
myImage.onclick = function() {
clearInterval(intervalHandle);
};
mainImage is an object in HTML and the changeImage function changes current picture.
How should I change my code to make it work?
removed the line that only says "mainImage.mousover =" in the middle
var myImage = document.getElementById("mainImage");
var imageArray = ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg",
"_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"];
var imageIndex = 0;
function changeImage() {
myImage.setAttribute("src",imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
// setInterval is also in milliseconds
mainImage.onmousover = function () {
var intervalHandle = setInterval(changeImage,1000);
}
myImage.onclick = function() {
clearInterval(intervalHandle);
};
You have some type error like:
mainImage.mousover = is syntax error.
change mainImage.mousover to mainImage.onmouseover.
Also you should wrap your code in window.load event handler because it force browser execute your code after image has loaded.
Change code to following:
window.onload = function () {
var myImage = document.getElementById("mainImage");
var imageArray = ["_images/overlook.jpg", "_images/winery_sign.jpg", "_images/lunch.jpg",
"_images/bigSur.jpg", "_images/flag_photo.jpg", "_images/mission_look.jpg"];
var imageIndex = 0;
//mainImage.mousover =
function changeImage() {
myImage.setAttribute("src", imageArray[imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length) {
imageIndex = 0;
}
}
// setInterval is also in milliseconds
var intervalHandle;
mainImage.onmouseover = function () {
intervalHandle = MyImageInterval();
}
document.getElementById("stopButton").onclick = function () {
clearInterval(intervalHandle);
};
function MyImageInterval() {
return setInterval(changeImage, 1000);
}
}
Notice: You should add an input with type = "button" with Id="stopButton".
How can I reset interval onclick in JavaScript. I have the following tutorial and everything works bt I can get the sideshow to re-start on click.
var myImage = document.getElementById("mainImage");
var imageArray = ["_images/overlook.jpg","_images/winery_sign.jpg","_images/lunch.jpg",
_images/bigSur.jpg","_images/flag_photo.jpg","_images/mission_look.jpg"];
var imageIndex = 0;
function changeImage (){
myImage.setAttribute("src",imageArray [imageIndex]);
imageIndex++;
if (imageIndex >= imageArray.length){
imageIndex = 0;
}
}
var intervalHandler = setInterval(changeImage, 5000);
myImage.onclick = function (){
clearInterval(intervalHandler);
}
**// The code below doesn’t work**
var intervalReset = clearInterval;
myImage.onclick = function (){
setInterval(intervalReset);
};
The setInterval returns an interval ID which you use to clear the interval:
var intervalDuration = 5000;
myImage.onclick = function (){
clearInterval(intervalHandler);
// Assumes intervalDuration is defined
intervalHandler = setInterval(changeImage, intervalDuration);
};
You're setting onclick twice, that replaces the handler, so only the later definition will count. Use addEventListener instead:
myImage.addEventListener("click", function() {
//first set of stuff
});
myImage.addEventListener("click", function() {
//more stuff
});
And only your first function makes sense. You might want to also reset imageIndex to 0.
So all-in-all, your code should look something like:
var intervalHandler = setInterval(changeImage, 5000);
myImage.addEventListener("click", function() {
clearInterval(intervalHandler);
imageIndex = 0;
intervalHandler = setInterval(changeImage, 5000); //restart again
});
I have a slideshow that I am triggering with a call from a link. The slideshow is working well. I am having problems stopping AND clearing the slideshow. I have a temporary link that I am calling the stopShow function that is stopping the show, but is not clearing it so I can then redisplay other items.
// JavaScript Document
var imagePaths = ["_sites/BBB_homepage.png","_sites/CabezonKidsDental_homepage.png","_sites/djer_homepage.png","_sites/enchanted_homepage.png","_sites/JoeSSausage_homepage.png","_sites/MMCS_homepage.png","_sites/mySRB.png","_sites/PHCP_homepage.png","_sites/smilesforkidsnm_homepage.png","_sites/t2consulting_homepage.png","_sites/Upward_homepage.png","_sites/Webb_based_homepage.png"];
var showCanvas = null;
var showCanvasCtx = null;
var img = document.createElement("img");
var currentImage = 0;
var revealTimer;
var stopShow = 0;
var slideTImer;
function slideShow() {
if (!stopShow){
showCanvas = document.getElementById('Canvas1');
showCanvasCtx = showCanvas.getContext('2d');
//clear canvas
showCanvasCtx.clearRect(0,0,showCanvasCtx.canvas.width,showCanvasCtx.canvas.height);
//set image size and call switch function
img.setAttribute('width','500');
img.setAttribute('height','400');
switchImage();
//start the animation
slideTimer = setInterval(switchImage,3000);
}
}
function switchImage() {
//set img element source property to images in slideshow
img.setAttribute('src',imagePaths[currentImage++]);
//if past the last image, loop
if (currentImage >= imagePaths.length)
currentImage = 0;
//fade into image by 10th of full saturation
showCanvasCtx.globalAlpha = 0.1;
revealTimer = setInterval(revealImage,100);
}
function revealImage() {
showCanvasCtx.save();
showCanvasCtx.drawImage(img,100,0,500,400);
showCanvasCtx.globalAlpha += 0.1;
if (showCanvasCtx.globalAlpha >= 1.0) clearInterval(revealTimer);
showCanvasCtx.restore();
}
function stopSlideShow() {
//alert('stop show');
clearInterval(slideTimer);
clearInterval(revealTimer);
stopShow=1;
showCanvas = document.getElementById('Canvas1');
showCanvasCtx = showCanvas.getContext('2d');
//clear canvas
showCanvasCtx.clearRect(0,0,showCanvasCtx.canvas.width,showCanvasCtx.canvas.height);
}
This is wrong!
showCanvasCtx.canvas.width
The object model of the canvas works this way:
Canvas -> Context
the width and height parameters are not in the Context but in the Canvas itself. So, considering you got them this way in your code:
showCanvas = document.getElementById('Canvas1');
showCanvasCtx = showCanvas.getContext('2d');
you should get the dimensions of the canvas like this:
showCanvas.width
showCanvas.height
By removing if (!stopShow){ call, and clearing the canvas in the stopSlideShow function, the function works as desired. It was necessary to set the globalAlpha to 1 in the stopSlideShow function. The ending code looks like this:
// JavaScript Document
var imagePaths = ["_sites/BBB_homepage.png","_sites/CabezonKidsDental_homepage.png","_sites/djer_homepage.png","_sites/enchanted_homepage.png","_sites/JoeSSausage_homepage.png","_sites/MMCS_homepage.png","_sites/mySRB.png","_sites/PHCP_homepage.png","_sites/smilesforkidsnm_homepage.png","_sites/t2consulting_homepage.png","_sites/Upward_homepage.png","_sites/Webb_based_homepage.png"];
var showCanvas = null;
var showCanvasCtx = null;
var img = document.createElement("img");
var currentImage = 0;
var revealTimer;
var stopShow = 0;
var slideTImer;
function slideShow() {
showCanvas = document.getElementById('Canvas1');
showCanvasCtx = showCanvas.getContext('2d');
//clear canvas
showCanvasCtx.clearRect(0,0,showCanvas.width,showCanvas.height);
//set image size and call switch function
img.setAttribute('width','500');
img.setAttribute('height','400');
switchImage();
//start the animation
slideTimer = setInterval(switchImage,3000);
}
function switchImage() {
//set img element source property to images in slideshow
img.setAttribute('src',imagePaths[currentImage++]);
//if past the last image, loop
if (currentImage >= imagePaths.length)
currentImage = 0;
//fade into image by 10th of full saturation
showCanvasCtx.globalAlpha = 0.1;
revealTimer = setInterval(revealImage,100);
}
function revealImage() {
showCanvasCtx.save();
showCanvasCtx.drawImage(img,100,0,500,400);
showCanvasCtx.globalAlpha += 0.1;
if (showCanvasCtx.globalAlpha >= 1.0) clearInterval(revealTimer);
showCanvasCtx.restore();
}
function stopSlideShow() {
//alert('stop show');
clearInterval(slideTimer);
clearInterval(revealTimer);
stopShow=1;
img.setAttribute('src',100);
showCanvas = document.getElementById('Canvas1');
showCanvasCtx = showCanvas.getContext('2d');
showCanvasCtx.globalAlpha=1;
}