JQuery주기 일시 중지 OnClick 이미지

Question

내 페이지에 호출기가있는 JQuery Cycle 갤러리가 있습니다. Javascript에 "일시 중지 : 1"을 추가하는 것만으로 일시 중지 기능을 추가하기 쉽습니다. 하지만 마우스를 올리면 일시 중지됩니다. 큰 이미지에 클릭 기능이있는 일시 중지/다시 시작 기능을 추가하려면 어떻게해야합니까? 따라서 큰 이미지를 클릭하면 슬라이드 쇼가 일시 중지되고 다시 클릭하면 다시 시작됩니까? 바이올린

링크 : 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> 

자바 스크립트

$('#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/