다른 요소의 onClick을 통해 SuperSized.js 일시 중지

Question

jQuery를 실제로 가져 오지 않습니다. JS 속성을 사용하여 클라이언트 측 DOM 속성을 변경하는 경우에만 JS를 사용합니다.하지만 툴을 사용할 때 유용합니다. 내 페이지에서 SuperSized 슬라이드 쇼를 실행 중이고 아래쪽에있는 탐색 모음에 두 개의 버튼을 추가했습니다. 이 버튼을 클릭하면 현재 슬라이드에 대한 자세한 정보를 보여주는 창이 열리지 만 '현재'슬라이드이기 때문에 창이 열려있는 동안 프로그램을 중지해야합니다. 이 모든 업무를 중지하는 것을 제외하고는 모든 것이 정상적으로 작동합니다. 나는 API를 언급하고, 단지을하는 전화가 :

$(element).click(function(){ 
    api.playToggle(); 
}); 

는 ...하지만 난 다른 요소에 온 클릭이 전화를 어떻게? 난, 난 그냥

어떤 도움이 많이

감사 ... 난 평범한 구식의 onclick = ""에서이 기능을 자신을 호출하는 방법을 얻을하지 않습니다 위의 코드를 '요소'에 클릭 이벤트 핸들러를 추가하는 얻을 Danny

Answer 1

요소에 click 이벤트를 첨부해야합니다. 나는 당신의 "버튼"을 가정 할 것입니다

http://api.jquery.com/click/

는 링크입니다.

HTML :

<div id="btnContainer"> 
    <a id="slideInfo" href="#">More Info</a> 
</div> 

jQuery를 :

$(function($) { 
    $('#slideInfo').click(function() { 
     api.playToggle(); 
    }); 
}); 

다음

이하고있는 것입니다. 우선 jQuery는 페이지로드가 완료된 후에 실행해야한다.

$(function($) { 
    //Do this when page/DOM is done loading 
}); 

우리는 slideInfo의 id를 가진 요소를 선택 jQuery Selectors를 사용 : 그것은이 이루어집니다. 요소에 click 이벤트 핸들러를 연결합니다. 클릭 핸들러 내부에서 요소가 클릭되면 실행하려는 코드를 정의합니다. 이 경우 우리는 슬라이드 쇼의 재생을 토글하고 싶습니다. api.PlayToggle() 호출; supersized 플러그인의 기능은 그렇게 할 것입니다.

기억해야 할 점 중 하나는 슬라이드 쇼를 일시 중지하므로 더 많은 정보 창을 표시 할 수 있다는 것입니다. 어떻게이 창을 표시하는지 모르지만 대화 상자 팝업을 사용하는 것이 좋습니다. 사용자가이 대화 상자 팝업을 닫으면 슬라이드 쇼를 다시 시작하기 위해 api.playToggle() 함수를 다시 호출해야합니다. 그것에 대한 더 많은 도움이 필요하시면 더 많은 정보를 보내주십시오.

두 번째 질문이 무엇인지 정확히 알 수 없습니다. api.playToggle() 함수를 발생시키는 버튼을 클릭 할 때 호출되는 함수를 원하지만 다른 함수 나 다른 jQuery 코드에서이 함수를 호출하거나 다른 요소에 연결하려고한다고 생각합니다. 이 경우이에 jQuery를 변경하는 것이 좋습니다 :

<script type="text/css"> 
    function ToggleSlideshow() { 
     api.playToggle(); 
    } 

    $(function($) { 
     $('#slideInfo').click(function() { 
      ToggleSlideshow(); 
     }); 
    }); 
</script> 

난 그냥 단순히 api.playToggle() 함수를 실행됩니다 ToggleSlideshow()라는 함수를 만들었습니다. 그런 다음 클릭 핸들러 함수를 연결하면 ToggleSlideshow() 함수가 실행되도록 지시합니다.당신은 버튼이나 모두 당신이해야 할 것입니다 비슷한의 OnClick 속성이를 첨부 할 경우입니다 :

onClick="javascript:ToggleSlideShow()" 

내가 정확하게 질문에 대답했다 바랍니다. 이 코드를 사용하고

Answer 2

당신은 제안 :

<script type="text/javascript"> 


$(function($) { 
    $('#slideInfo').click(function() { 
     api.playToggle(); 
    }); 
}); 

</script> 


<div id="btnContainer"> 
    <a id="slideInfo" href="#">More Info</a> 
</div> 

모달 상자를 사용하여 슬라이드 쇼를 일시 중지하려면. 그것은 완벽하게 작동합니다!

그러나 모달 상자를 닫으면 슬라이드 쇼를 다시 시작할 수 없습니다.

몇 가지 추가 코드가 누락 되었습니까? (이전 사용자에게이 경우에 대해 물어 썼습니다.)

고마워요!