CODEWITHSUNDEEP
javascriptimagexhtmlgallery
Virgil
Virgil

Reputation: 25

How do I stop a image gallery from running onClick?

I have a site that has an image gallery that changes images every few seconds using JavaScript; however, I want to know how to STOP the images from changing when a user clicks on one of the images.

So far, the images are rotating as planned, but I can't seem to get the "onClick" scripting to STOP the rotation when the user clicks on an image. I don't need to have an alert popup or need it to do anything, I just need it to STOP the image rotation when someone clicks on one of the pictures.

Here's the HTML code I have:

Upvotes: 0

Views: 263

Answers (2)

Blessed Geek
Blessed Geek

Reputation: 21664

First of all, you missed out on the keyword "IF" in one of the lines of your code.

However, the way to create a terminable repetitive action is to setInterval and then use clearInterval to terminate the repetition.

semaphore = setInterval(somefunction, someinterval);
clearInterval(semaphore);

Example (I wrote this off-the-cuff, so there might be some errors, but you shd get the idea):

<img src="./images/image1.jpg" id="imageGallery" name="imageGallery"
 onclick="chooseImg(this)" />

<script>

var turn = setInterval(function(){imgTurn()},5000);
var images = function2CreateImgArray();
var imageN = 0;

function chooseImg(img){
  clearInterval(turn);
  function2DisplayImg(imageN); // or do whatever
}

function imgTurn(){
   if (imageN++ >= images.length) imageN = 0;
   function2DisplayImg(imageN++);
}

</script>

You could replace the setInterval with setTimeout.

var turn = setTimeout(function(){imgTurn()},5000);

But then you need to use clearTimeout to stop it:

clearTimeout(turn);

But if you use setTimeout, you would need to setTimeout for the next image display, so you would not even need to clearTimeout to stop the rotation.

<img src="./images/image1.jpg" id="imageGallery" name="imageGallery"
 onclick="chooseImg(this)" />

<script>

setTimeout(function(){imgTurn()},5000);
var images = function2CreateImgArray();
var imageN = 0;
var turn = 1;

function chooseImg(img){
  turn = 0;
  function2DisplayImg(imageN); // or do whatever
}

function imgTurn(){
   if (turn==0) return;
   if (imageN++ >= images.length) imageN = 0;
   function2DisplayImg(imageN++);
}

</script>

Upvotes: 0

tckmn
tckmn

Reputation: 59293

else (getValue=='STOP')
{
    alert("STOPPED");

}

That won't do what you probably want it to do. It should be:

else if (getValue=='STOP')
{
    alert("STOPPED");

}

Upvotes: 1

Related Questions