jQuery cycle plugin - click stop auto slide show

**ggalan** · 01-18-2011, 03:34 AM

i have this code that plays a great slide show with thumbnails, but i would like the thumbnails to stop the auto slide show
or
a navigation that can control the auto play

Code:

<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Advanced Pager Demo</title>

<style type="text/css">
#slideshow { left: 20px }
#nav { width: 100%; height: 80px; margin: 15px;  }
#nav li { width: 25px; float: left; margin: 8px; list-style: none }
#nav a { width: 25px; padding: 3px; display: block; border: 1px solid #ccc; }
#nav a.activeSlide { background: #88f }
#nav a:focus { outline: none; }
#nav img { border: none; display: block }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"></script>

<script type="text/javascript">
$(function() {
    $('#slideshow').before('<ul id="nav">').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 1000,
        pager:  '#nav',
        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"><img src="' + slide.src + '" width="25" height="25" /></a></li>';
        }
		//this breaks it
		$('li').find('a').click(function(){ 
				$('#slideshow').cycle('pause'); 
				return false; 
		}); 
		
    });
});
</script>
</head>
<body>

<div id="main">


<div id="slideshow" class="pics">
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" />
</div>


</div>

</body>
</html>

some reference ive used
http://jquery.malsup.com/cycle/pager2.html
http://old.nabble.com/jQuery-Cycle-P...029s27240.html
http://jquery.malsup.com/cycle/

if anyone can lend a hand, we can all share a great slide show
thanks

**jscheuer1** · 01-18-2011, 07:46 AM

Code:

<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Advanced Pager Demo</title>

<style type="text/css">
#slideshow { left: 20px }
#nav { width: 100%; height: 80px; margin: 15px;  }
#nav li { width: 25px; float: left; margin: 8px; list-style: none }
#nav a { width: 25px; padding: 3px; display: block; border: 1px solid #ccc; }
#nav a.activeSlide { background: #88f }
#nav a:focus { outline: none; }
#nav img { border: none; display: block }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"></script>

<script type="text/javascript">
jQuery(function($){
	$('#slideshow').before('<ul id="nav">').cycle({
		fx:     'fade',
		speed:  'fast',
		timeout: 1000,
		pager:  '#nav',
		pagerAnchorBuilder: function(idx, slide){
			return '<li><a href="#"><img src="' + slide.src + '" width="25" height="25" /></a></li>';
		}
	});

	$('#nav a').click(function(){ 
		$('#slideshow').cycle('pause');
	});
});
</script>
</head>
<body>

<div id="main">


<div id="slideshow" class="pics">
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" />
</div>


</div>

</body>
</html>

**ggalan** · 01-18-2011, 03:56 PM

jscheuer1, you rock!!

**codeCutterFL** · 03-25-2011, 07:27 PM

Originally Posted by jscheuer1

Code:

<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Advanced Pager Demo</title>

<style type="text/css">
#slideshow { left: 20px }
#nav { width: 100%; height: 80px; margin: 15px;  }
#nav li { width: 25px; float: left; margin: 8px; list-style: none }
#nav a { width: 25px; padding: 3px; display: block; border: 1px solid #ccc; }
#nav a.activeSlide { background: #88f }
#nav a:focus { outline: none; }
#nav img { border: none; display: block }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"></script>

<script type="text/javascript">
jQuery(function($){
	$('#slideshow').before('<ul id="nav">').cycle({
		fx:     'fade',
		speed:  'fast',
		timeout: 1000,
		pager:  '#nav',
		pagerAnchorBuilder: function(idx, slide){
			return '<li><a href="#"><img src="' + slide.src + '" width="25" height="25" /></a></li>';
		}
	});

	$('#nav a').click(function(){ 
		$('#slideshow').cycle('pause');
	});
});
</script>
</head>
<body>

<div id="main">


<div id="slideshow" class="pics">
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" />
</div>


</div>

</body>
</html>

Hi Moderator,

I am a brand new member of your site. Also, I am pretty new to jQuery and BRAND NEW to the cycle plugin. I racked my brains on this very same issue for several days. Your solution helped me to solve my problem.

The ultimate cause of my problem was that one of my cycle plugin settings was "conflicting" with my jQuery click event. I had the pauseOnPageHover option set to "1". So, when I clicked on a pager link, it had no effect because when I removed the hover the slideshow resumed.

In my google searches I have noticed that many people are having this same problem. I wonder if this pauseOnPageHover setting is the cause.

In my slideshow I want to be able to have the slide change on mouseover and pause on hover. It would also be nice if I could CLICK on a particular pager link to have the slideshow pause and then move the mouse off of the link. Do you know if there is a way to do this??

I am also wondering if there is a way to DYNAMICALLY CHANGE a cycle option using jQuery (or if there is a way to do this using the cycle plugin).

For example, let's say that I have the "pause" option set to "1" to pause the slideshow when I hover over a slide. What if I want to CLICK on the slide to have it pause the slideshow?? Can I reset "pause" to "0" using jQuery?

Thanks so much for your help.

Jim

**jscheuer1** · 03-26-2011, 04:22 PM

I think I may have heard about this issue or seen some evidence of it once. However, it would be much easier for me to help you if you could put up a demo of the problem. That way I don't have to guess at all of your settings and set up a slideshow complete with images, not to mention what your click function is.

Set something like that up and provide a link to it and I'll see what I can do.

**shemjaza** · 04-12-2011, 11:15 PM

Originally Posted by jscheuer1

I think I may have heard about this issue or seen some evidence of it once. However, it would be much easier for me to help you if you could put up a demo of the problem. That way I don't have to guess at all of your settings and set up a slideshow complete with images, not to mention what your click function is.

Set something like that up and provide a link to it and I'll see what I can do.

Hi there I just found this page from a search engine and I'm having the same issue. I can get the click to pause to work or the mouse over to pause to work... but not both together.

http://artsonline.arts.monash.edu.au...e-problem.html

Code:

<!DOCTYPE html>
<html>
<head>
<title>JQuery Cycle Plugin - Pause Vs Pause Problem</title>

<style type="text/css">
#slideshow { left: 20px }
#slideshow .pane { margin: 10px; padding: 10px; border: 1px solid #666; }
#slideshow .pane .pauseButton, #slideshow .pane .resumeButton, #slideshow .pane .pauseButton:link, #slideshow .pane .resumeButton:link { display:block; padding: 5px; color: #fff; background-color: #666; margin: 2px 0px; border: 1px solid #000;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">></script>
<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"></script>

<script type="text/javascript">
jQuery(function($){
        $('#slideshow').cycle({
                fx:     'fade',
                speed:  'fast',
                timeout: 1000,
                pause: 1
        });

        $('.pauseButton').click(function(){
                $('#slideshow').cycle('pause');
        });

        $('.resumeButton').click(function(){
                $('#slideshow').cycle('resume');
        });
});
</script>
</head>
<body>

<div id="main">


<div id="slideshow" class="pics">
        <div class="pane"><a class="pauseButton" href="#">Pause</a><a class="resumeButton" href="#">Resume</a><img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /></div>
        <div class="pane"><a class="pauseButton" href="#">Pause</a><a class="resumeButton" href="#">Resume</a><img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /></div>
        <div class="pane"><a class="pauseButton" href="#">Pause</a><a class="resumeButton" href="#">Resume</a><img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /></div>
        <div class="pane"><a class="pauseButton" href="#">Pause</a><a class="resumeButton" href="#">Resume</a><img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /></div>
        <div class="pane"><a class="pauseButton" href="#">Pause</a><a class="resumeButton" href="#">Resume</a><img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /></div>
        <div class="pane"><a class="pauseButton" href="#">Pause</a><a class="resumeButton" href="#">Resume</a><img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" /></div>
        <div class="pane"><a class="pauseButton" href="#">Pause</a><a class="resumeButton" href="#">Resume</a><img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" /></div>
        <div class="pane"><a class="pauseButton" href="#">Pause</a><a class="resumeButton" href="#">Resume</a><img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" /></div>
</div>


</div>

</body>
</html>

**jscheuer1** · 04-21-2011, 02:43 PM

Sorry for taking so long getting back to you.

The problem probably is the pause: 1 property sets up a toggle. I didn't trace the code. And/or there's no keeping track of the pause state. Cycle may or may not provide this, but it's easy enough to make our own.

There are at least two ways of looking at this depending upon exactly what behavior we're after, here's one:

Code:

<script type="text/javascript">
jQuery(function($){
	$('#slideshow').cycle({
		fx:     'fade',
		speed:  'fast',
		timeout: 1000,
		pause: 0
	});

	var pausestate;
	function pauseit(e){
		e.preventDefault();
		if(!pausestate){
			$('#slideshow').cycle('pause');
			pausestate = true;
		}
	}

	function resumeit(e){
		e.preventDefault();
		if(pausestate){
			$('#slideshow').cycle('resume');
			pausestate = false;
		}
	}

	$('.pauseButton').click(pauseit);

	$('.resumeButton').click(resumeit);
	
	$('#slideshow').bind('mouseenter mouseleave', function(e){
		if (e.type === 'mouseenter'){
			pauseit(e);
		} else {
			resumeit(e);
		}
	});
});
</script>

It allows pause and resume to work as expected within the #slideshow div. Once the mouse moves out of #slideshow, it resumes if paused. It always pauses, if not already paused when the mouse moves over #slideshow.

The other way of looking at it that I can think of, and I'm not sure if this would pass the logic test yet, would be that if paused by the pause button, it stays paused until the resume button is clicked, but otherwise pauses/resumes as expected when the mouse moves over/out of #slideshow.

Just tried it, doesn't really seem to make sense, but I'll give it more thought. Any other arrangement, like it stays resumed if resumed by the resume button until the pause button is clicked, though probably doable, seems counterintuitive from the visitor's point of view.

There could be other ways of looking at it, did you have something else in mind?

**3mp3rium** · 04-20-2012, 09:05 AM

if i want to move the thumbnail position in the lower left of the slideshow (inside the slide show, not outside),and use the left and right button to go next or backward in the left and right of the slide show. How should i change the program?

**santoshk88** · 07-22-2013, 09:55 PM

**jscheuer1** · 07-22-2013, 10:05 PM

I can't either. There's either a problem with the server, or it's not public. You should be able to find everything you need for the cycle plugin here though:

http://jquery.malsup.com/cycle/

Thread: jQuery cycle plugin - click stop auto slide show

Thread Tools

Search Thread

jQuery cycle plugin - click stop auto slide show

The Following User Says Thank You to ggalan For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions