JQuery Cycle Pause OnClick Image

Question

У меня есть галерея JQuery Cycle на моей странице с пейджером. Легко добавить функцию паузы, просто добавив «pause: 1» в Javascript. Но это пауза для изображения наведения. Как добавить функцию паузы/возобновления с функцией щелчка на большом изображении. Поэтому, если я нажимаю на большое изображение, он приостанавливает показ слайдов и снова нажимает на него.

ССЫЛКА НА FIDDLE: http://jsfiddle.net/ka2Xs/19/

Это мой код:

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

Проверяя plugin's API reference, похоже, что все, что вам нужно сделать, это позвонить .cycle("toggle"), чтобы переключить паузу/возобновить слайд-шоу.

Я отредактировал ваш код и включил в себя нижеследующий код JavaScript.

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

Это делает так, чтобы всякий раз, когда изображение нажимается на слайд-шоу, оно приостанавливается.

Заканчивать этот JSfiddle - http://jsfiddle.net/skoshy/ka2Xs/20/