Upravit funkci, aby se při odchycené události zastavilo opakování

15. 4. 2015 09:45:21

Ahoj, rád bych poprosil o pomoc. Na web jsem si našel slider pro jquery, přesně, který mi po pár úpravách vyhovuje. Funguje dobře, dělá to, že my postupně bere DIVy s obsahem (text a obrázek) a dává je do hlavního okna v upravené podobě. Obdobně to funguje např. tady (ale to je jiná fce http://demo.webdeveloperplus.com/featured-content-slider/). Akorát jsem se v tom svém upraveném kódu zasekl a nevím jak dál.

- Na začátku se nastavuje "intervalID = setInterval(cycleImage, slidetime);", který mi načítá nový DIV po x definovaných vteřinách. Já bych potřeboval toto načítání zrušit, pokud se děje tato fce "$(".image_thumb div.art").hover(function(){ ..." tzn. když na nějaký DIV najedu myší. A když zase odjedu, tak aby se mi ten interval rozběhl. Jak to udělat?

díky.

/** SLIDER GALLERY - HOMEPAGE **/
var intervalId;
var slidetime = 10000; // milliseconds between automatic transitions

$(document).ready(function() {

// Comment out this line to disable auto-play
	intervalID = setInterval(cycleImage, slidetime);

$(".hp_slider .desc").show(); // Show Banner
	$(".hp_slider .block").animate({ opacity: 0.80 }, 1 ); // Set Opacity

// Click and Hover events for thumbnail list
	//var list = $(".image_thumb div.art");
	//$(".image_thumb div.art:first").eq(parseInt(Math.random()*list.length)).addClass('active'); 
	$(".image_thumb div.art:first").addClass('active'); 
	$(".image_thumb div.art").hover(function(){ 
		// Set Variables
		var imgAlt = $(this).find('img').attr("alt"); //  Get Alt Tag of Image
		var imgTitle = $(this).find('a').attr("href"); // Get Main Image URL
		var imgDesc = $(this).find('.block').html(); //  Get HTML of block
		var imgDescHeight = $(".hp_slider").find('.block').height(); // Calculate height of block	
		
		if ($(this).is(".active")) {  // If it's already active, then...
			return false; // Don't click through
		} else {
			// Animate the Teaser				
			$(".hp_slider .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
				$(".hp_slider .block").html(imgDesc).animate({ opacity: 0.80,	marginBottom: "0" }, 250 );
				$(".hp_slider img").attr({ src: imgTitle , alt: imgAlt});
			});
		}
		
		$(".image_thumb div.art").removeClass('active'); // Remove class of 'active' on all lists
		$(this).addClass('active');  // add class of 'active' on this list only
		return false;
		
	}) .hover(function(){
		$(this).addClass('hover');
		}, function() {
		$(this).removeClass('hover');
	});
			
	// Toggle Teaser
	$("a.collapse").click(function(){
		$(".hp_slider .block").slideToggle();
		$("a.collapse").toggleClass("show");
	});
	
	// Function to autoplay cycling of images
	// Source: http://stackoverflow.com/a/9259171/477958
	function cycleImage(){
		var onLastLi = $(".image_thumb div.art:last").hasClass("active");       
		var currentImage = $(".image_thumb div.art.active");
		
		
		if(onLastLi){
		  var nextImage = $(".image_thumb div.art:first");
		} else {
		  var nextImage = $(".image_thumb div.art.active").next();
		}
		
		$(currentImage).removeClass("active");
		$(nextImage).addClass("active");
		
			// Duplicate code for animation
			var imgAlt = $(nextImage).find('img').attr("alt");
			var imgTitle = $(nextImage).find('a').attr("href");
			var imgDesc = $(nextImage).find('.block').html();
			var imgDescHeight = $(".hp_slider").find('.block').height();
						
			$(".hp_slider .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , function() {
		  $(".hp_slider .block").html(imgDesc).animate({ opacity: 0.80,	marginBottom: "0" }, 250 );
		  $(".hp_slider img").attr({ src: imgTitle , alt: imgAlt});
		});
  };
	
});// Close Function

15. 4. 2015 09:45:21