• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 446
  • Last Modified:

jquery stop the slideshow on mouseout

Hi all,

After some extensive help on here to get a robust slideshow script up and running I'm struggling to get the mouseout event working to stop the animation.

Scrip so far - uses cycle plugin:

<script type="text/javascript">
var caches = {};
function addImages(container) {
	var images = caches[container].imgArr;
	var cont = $("#"+container);
	cont.empty();

	//Loops through all the images
	for (var i=0, n=images.length;i<n;i++) {
	cont.append('<img src="'+images[i].src+'"/>') //Add the hiding class
	}
	
	//Start the slideshow 
	$("#"+container).cycle({
		fx: 'fade',
		speed: 1,
		timeout:  500
	});
	
	
  
}
(function($) {

  // Argument 0 is the container, Argument1 is an array of image paths relative to the current page.
  $.preloadImages = function() {
    var container = arguments[0];
    var cache = caches[container] = {};   
    cache.imgArr  = []; // holds only images that loaded
    cache.stack = arguments[1]; // all image urls
    cache.counter = 0; // joint errors and loaded
    cache.errors  = 0; // only errors
    cache.loaded  = 0; // only loaded - same as .imgArr.length
    for (var i = cache.stack.length; i--;) {
      var cacheImage = $('<img/>');
      cacheImage.bind("load",function() { cache.imgArr.push(this); cache.loaded++; cache.counter++;if (cache.counter>=cache.stack.length) addImages(container) })
      cacheImage.bind("error",function() { cache.errors++; cache.counter++; if (cache.counter>=cache.stack.length) addImages(container)  })
      cacheImage.attr("src",cache.stack[i]);
    }
    $("#"+container).unbind("mouseenter"); // remove the mouseOver we defined in the onload
	

	
  }
})(jQuery);

$(document).ready(function() {
  $(".imgset").mouseenter(function() {
		var dataString=$(this).attr("data-string"); 
		var thisId = this.id; 
		//Set idx to that of the div
		var idx = thisId.replace("div","");
		//Call the php script for images
		$.ajax({
			type: "GET",
			url: "imagethumb.php",
			data: dataString,
			cache: true,
			success: function(imgdata) {
        // add the stack to the caches[divId], preloads and loads the div with the result			
			  jQuery.preloadImages(thisId,imgdata.split(",")); 
			}
		});
  });

  
});
</script>  

Open in new window


First I thought I need a:

	//Check for mouseout then destroy the slideshow
  	$(".imgset").mouseout(function() {
	//Destroy the animation
	  this.id.cycle('destroy');
	});

Open in new window


But that didn't work. Having a little difficulty plotting where this should go.

Cheers

0
dolythgoe
Asked:
dolythgoe
  • 6
  • 6
1 Solution
 
leakim971PluritechnicianCommented:
put this line 41:

$("#"+container).mouseout(function() {
         $(this).cycle('stop');
});
0
 
dolythgoeAuthor Commented:
Thanks, I did try something like that first but got strange results.

I put this in, and reloaded the page. When I moused over, it flashed one frame before returning to the original image but when I moved away to mouseover something else it started to fade through the slideshow completely ignoring the parameters:
            
fx: 'fade',
speed: 1,
timeout:  500

Just returned to default cycle plugin settings - really odd!
0
 
leakim971PluritechnicianCommented:
do you have a llink to see the page running?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
dolythgoeAuthor Commented:
Sry it's all local but here's a code spit out of 5 stacks of images - the ajax call just returns a comma delimited string of images. so you can just hard code a few like:

http://farm3.static.flickr.com/2400/2341766252_4c04c86424.jpg,
http://farm4.static.flickr.com/3250/2324772917_929a160447.jpg,
http://farm3.static.flickr.com/2045/2324772847_69c00f5459.jpg,
http://farm3.static.flickr.com/2295/2325591922_eef6e2d67d.jpg,
http://farm3.static.flickr.com/2008/2325591088_88423d238c.jpg

I've adjusted it so you can see it all in action by just running in your browser - what I'm looking to do is to get the animation to stop and reset (back to original image) on mouseout. Animation should only occur when the mouse is over that particular <div>

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/malsup/cycle/master/jquery.cycle.lite.js"></script>
<style type="text/css">
.resultbox { float: left; width: 325px; }
.imgset { width: 325px; height: 325px; }
</style>
<script type="text/javascript">
var caches = {};
function addImages(container) {
	var images = caches[container].imgArr;
	var cont = $("#"+container);
	cont.empty();

	//Loops through all the images
	for (var i=0, n=images.length;i<n;i++) {
	cont.append('<img src="'+images[i].src+'"/>') //Add the hiding class
	}
	
	//Start the slideshow 
	$("#"+container).cycle({
		fx: 'fade',
		speed: 1,
		timeout:  500
	});
	
	
  
}
(function($) {

  // Argument 0 is the container, Argument1 is an array of image paths relative to the current page.
  $.preloadImages = function() {
    var container = arguments[0];
    var cache = caches[container] = {};   
    cache.imgArr  = []; // holds only images that loaded
    cache.stack = arguments[1]; // all image urls
    cache.counter = 0; // joint errors and loaded
    cache.errors  = 0; // only errors
    cache.loaded  = 0; // only loaded - same as .imgArr.length
    for (var i = cache.stack.length; i--;) {
      var cacheImage = $('<img/>');
      cacheImage.bind("load",function() { cache.imgArr.push(this); cache.loaded++; cache.counter++;if (cache.counter>=cache.stack.length) addImages(container) })
      cacheImage.bind("error",function() { cache.errors++; cache.counter++; if (cache.counter>=cache.stack.length) addImages(container)  })
      cacheImage.attr("src",cache.stack[i]);
    }
    $("#"+container).unbind("mouseenter"); // remove the mouseOver we defined in the onload
	
	/*$("#"+container).mouseout(function() {
			 $(this).cycle('stop');
	});*/

	
  }
})(jQuery);


$(document).ready(function() {
  $(".imgset").mouseenter(function() {
		var dataString=$(this).attr("data-string"); 
		var thisId = this.id; 
		//Set idx to that of the div
		var idx = thisId.replace("div","");
		//Call the php script for images
		//This returns comma delimited image urls
		/*
		$.ajax({
			type: "GET",
			url: "imagethumb.php",
			data: dataString,
			cache: true,
			success: function(imgdata) {
        // add the stack to the caches[divId], preloads and loads the div with the result		
			  jQuery.preloadImages(thisId,imgdata.split(",")); 
			}
			

		});*/
		var imgdata = 	"http://farm3.static.flickr.com/2400/2341766252_4c04c86424.jpg,http://farm4.static.flickr.com/3250/2324772917_929a160447.jpg,http://farm3.static.flickr.com/2045/2324772847_69c00f5459.jpg,http://farm3.static.flickr.com/2295/2325591922_eef6e2d67d.jpg,http://farm3.static.flickr.com/2008/2325591088_88423d238c.jpg";
					
		jQuery.preloadImages(thisId,imgdata.split(","));
  });

	  
  
});
</script>  
</head>
<body>
 <div class="resultbox">
<a href="#"><div class="imgset" id="div0" data-string="somevars-for-ajax">
			<img src="http://farm3.static.flickr.com/2008/2325591088_88423d238c.jpg" />		
		</div></a>

		
</div>
<div class="resultbox">
<a href="#"><div class="imgset" id="div1" data-string="somevars-for-ajax">
			<img src="http://farm3.static.flickr.com/2008/2325591088_88423d238c.jpg" />		
		</div></a>
		
</div>
<div class="resultbox">
<a href="#"><div class="imgset" id="div2" data-string="somevars-for-ajax">
			<img src="http://farm3.static.flickr.com/2008/2325591088_88423d238c.jpg" />		
		</div></a>
		
</div>
<div class="resultbox">

<a href="#"><div class="imgset" id="div3" data-string="somevars-for-ajax">
			<img src="http://farm3.static.flickr.com/2008/2325591088_88423d238c.jpg" />		
		</div></a>
		
</div>
<div class="resultbox">
<a href="#"><div class="imgset" id="div4" data-string="somevars-for-ajax">
			<img src="http://farm3.static.flickr.com/2008/2325591088_88423d238c.jpg" />		
		</div></a>
		
</div>
<br />
</body>

</html>

Open in new window



0
 
leakim971PluritechnicianCommented:
I use this one : http://malsup.github.com/jquery.cycle.all.js
instead this one : https://raw.github.com/malsup/cycle/master/jquery.cycle.lite.js

And I added this :         $("#"+container).hover(function() { $(this).cycle("pause"); }, function() { $(this).cycle("resume"); });

test page : http://jsfiddle.net/gnXXU/
0
 
dolythgoeAuthor Commented:
Cheers for that - I changed thsi to:

$("#"+container).hover(function() { $(this).cycle("resume"); }, function() { $(this).cycle("stop"); });

Open in new window


As I want it to reset on mouseout but play on mouseover but it does not start again after it' been hovered over once - great first time round but not second.

Also tried:

$("#"+container).hover(function() { $(this).cycle("start"); }, function() { $(this).cycle("stop"); });

Open in new window


But that didn't work - is there something else that is missing?

Thanks again
0
 
leakim971PluritechnicianCommented:
pause it immediately after creation :
        //Start the slideshow
        $("#"+container).cycle({ fx: 'fade', speed: 1, timeout:500 });
       $("#"+container).cycle("pause");

use :
        $("#"+container).hover(function() { $(this).cycle("resume"); }, function() { $(this).cycle("pause"); });

test page updated : http://jsfiddle.net/gnXXU/1/
0
 
dolythgoeAuthor Commented:
Thanks for that - still trying to get it to reset to the first frame after mouseout though - there isn't a 'reset' but might be able to do go to frame 1...
0
 
leakim971PluritechnicianCommented:
maybe : http://jsfiddle.net/gnXXU/4/

$("#"+container).hover(function() { $(this).cycle("resume"); }, function() { 
            $(this).cycle("pause");
            $("img:eq(0)", this).css({"opacity":1, "display":"block", "z-index":"6"});
            $("img:gt(0)", this).css({"opacity":1, "display":"block", "z-index":"5"});
        });

Open in new window

0
 
dolythgoeAuthor Commented:
Thanks again for your help - still no quite there yet.

It seems to go back to slide 1 ok but then resumes from where it left off as opposed to a true reset which takes it back to slide 1 in the sequential order. It's also a little glitchy as starts doing some odd things like flashing one frame up quickly randomly every now and again :(
0
 
leakim971PluritechnicianCommented:
you need to hack the plugin. if you can't request attention, rent a coder or choose an other plugin
0
 
dolythgoeAuthor Commented:
Actually the answer was quite simple in the end :)

$("#"+container).hover(function() { $(this).cycle("resume"); }, function() { $(this).cycle("pause").cycle(0); });

Just needed to add the .cycle(0)

Thanks for all your help
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now