JQuery Cycle Pause OnClick Image

Question

I have a JQuery Cycle gallery on my page with a pager. It is easy to add a pause function just by adding "pause: 1," to the Javascript. But that is a pause for hover image. How can I add a pause/resume function with a click function on the big image. So if I click on the big image it pauses the slideshow and clicking again resumes it?

LINK TO FIDDLE: http://jsfiddle.net/ka2Xs/19/

This is my code:

HTML

<div id="slideshow" class="pics">        
  <div class="cc"><img src="img/mobile/m1.jpg" height="400px"></div>
  <div class="cc"><img src="img/mobile/m2.jpg" height="400px"></div>
  <div class="cc"><img src="img/mobile/m3.jpg" height="400px"></div>
</div>

<ul id="nav" class="clearfix">
  <li><a href="#"><img src="img/mobile/m1_thumb.jpg" height="70"></a></li>
  <li><a href="#"><img src="img/mobile/m2_thumb.jpg" height="70"></a></li>
  <li><a href="#"><img src="img/mobile/m3_thumb.jpg" height="70"></a></li>
</ul>

Javascript

$('#slideshow').cycle({ 
fx:     'fade', timeout: 5000, height: 400, pager:  '#nav',
pagerAnchorBuilder: function(idx, slide) {         
// return selector string for existing anchor 
    return '#nav li:eq(' + idx + ') a'; 
    }     
});  
$('#direct').click(function() { 
    $('#nav li:eq(2) a').trigger('click'); 
    return false; 
}); 

Answer 1

By checking the plugin's API reference, it looks like all you need to do is call .cycle("toggle") to toggle pausing/resuming the slideshow.

I edited your code and included the following at the bottom of your JavaScript.

$('#slideshow img').click(function() {
    $('#slideshow').cycle('toggle');
});

That makes it so whenever an image is clicked on within the slideshow, it will pause.

Check out this JSfiddle - http://jsfiddle.net/skoshy/ka2Xs/20/