JavaScript/Prototype Pause on MouseOver

JavaScript
1

Hi,

I’m using this simple slideshow and wondered if anyone knew how to make it pause when I moved my mouse over it and then start again if I move my mouse off the image?

There is a demo of the slideshow here:
http://script.aculo.us/stuff/simplest_slideshow/

This is the main code:

<script>
setInterval(function(){
  var imgs = $$('.fadein img'), 
   visible = imgs.findAll(function(img){ return img.visible(); });
  if(visible.length>1) visible.last().fade({ duration: 1 });
    else imgs.last().appear({ duration: 1, 
      afterFinish: function(){ imgs.slice(0,imgs.length-1).invoke('show');  } });
}, 2000);
</script>

Thanks!

2

Wow, I am surprised that that official demo at script.aculo.us has so many W3C errors in markup…Oh well, here is answer for your question:

You should iterate each image and handle mouseenter/mouseleave events. I just used a global variable for this sample to make it easier (however this is not the best way).

<script type="text/javascript">

var duration = 3000;
var showNextImage = true;

$$('.fadein img').each(function(el){ el.observe('mouseenter', function() { showNextImage = false; }); });
$$('.fadein img').each(function(el){ el.observe('mouseleave', function() { showNextImage = true; }); });

setInterval(function(){
	if(!showNextImage){ return; }
	var imgs = $$('.fadein img'), visible = imgs.findAll(function(img){ return img.visible(); });
	if(visible.length > 1) {
		visible.last().fade({ duration: .3 });
	} else {
		imgs.last().appear({ duration: .3, afterFinish: function(){ imgs.slice(0,imgs.length-1).invoke('show');  } });
	}
}, duration);

</script>

This could be specific to the task you are trying to solve and I would actually advise you to learn jQuery. The same operation could be done with less code and effort.

3

I tried this and the slideshow works but it does not pause on I mouse over.

(I’m using this on a ecommerce site which already uses scriptaculous so unfortunately jquery isn’t an option)

Thanks.

4

I got it to work by doing this:

<script type="text/javascript">
var duration = 4000;
var showNextImage = true;
        function stop_slideshow() {
            showNextImage = false; 
        }
        
        function start_slideshow() {
            showNextImage = true; 
        }
setInterval(function(){
	if(!showNextImage){ return; }
	var imgs = $$('.fadein img'), visible = imgs.findAll(function(img){ return img.visible(); });
	if(visible.length > 1) {
		visible.last().fade({ duration: 1 });
	} else {
		imgs.last().appear({ duration: 1, afterFinish: function(){ imgs.slice(0,imgs.length-1).invoke('show');  } });
	}
}, duration);
</script>

The added onmouseover and onmouseout to the ul:

 <ul class="fadein" onmouseover="stop_slideshow()" onmouseout="start_slideshow()">
      <li><a href="http://google.com"><img src='slider.jpg' alt="" /></a></li>
      <li><a href="#"><img src='slider1.jpg' alt="" /></a></li>
    </ul>