jQuery를 통해 확장 된 Highslide 객체를 참조하는 방법

Question

사용자가 highslide를 통해 만든 확장 된 이미지를 닫으려면 웹 페이지의 아무 곳이나 클릭 할 수있는 작은 함수를 만들려고합니다. 팝업 된 이미지는 이미지가 완전히 확장 될 수없는 경우였습니다. 전체 크기로 확장하거나 브라우저 경계에 두는 옵션이 있지만 클릭 이벤트가 발생할 때 높이기 요소가 트리거되었습니다. 나는 아직도이 문제를 가지고이 일을 떠올랐다.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script> 
<script type="text/javascript" src="/hs/highslide/highslide-full.js"></script> 
<link rel="stylesheet" type="text/css" href="/hs/highslide/highslide.css" /> 


<script type="text/javascript">                                                     
var mState=false;                                                        
$(document).click(function() {                                                    
    hs.Expander.prototype.onMouseOver = function() {                                                
    mState = false;                                                        
    console.log('over') };                                                      
    hs.Expander.prototype.onMouseOut = function() {                                                
    mState = true;                                                        
    console.log('out') };                                                      
    console.log(mState);                                                       
    if (mState) hs.close();                                                      
}); </script> 

<a href="/pub/opdc/p0000/tall.jpg" class="highslide" onclick="return hs.expand(this)"> 
<img src="/pub/opdc/p0000/tall_t.jpg" alt="Highslide JS" align="right"></a> 

나는 단지 자바 스크립트/jQuery와 하이 슬 라이드를 배우므로 나쁜 습관에 대해 사과드립니다. Console.log는 엄격하게 디버깅 용이며 제거됩니다.

제 질문은 구체적으로 다음과 같습니다. highslide의 마우스 이벤트를 사용할 필요가 없도록 확장 된 highslide 이미지를 jQuery를 통해 참조하고자합니다. 나는 그들이 예측할 수없는 것으로 생각하고 있으며, 지금은 정확하게 작동하는 방법과 내가 원하는 결과를 보지 못하는 이유를 정확하게 찾아 낼 시간이 없다.

모두 의미가 있기를 바랍니다. 사전에 도움을 주셔서 감사합니다.

Answer 1

이 작은 마음 퍼즐 문제에 관심이있는 사용자는 디머 메서드를 사용하지 않고 "클릭하여 닫기"기능을 추가하기 위해 현재 내 웹 사이트에서 실행중인 최종 코드입니다.

<script type="text/javascript"> 
    var mState=false; 
    hs.Expander.prototype.onMouseOver = function() { mState = false; } 
    hs.Expander.prototype.onMouseOut = function() { mState = true; } 
    jQuery(document).click(function() { 
    if (mState) { 
     hs.close(); 
     mState = false; 
    } 
    }); 
</script> 

이 코드를 작동하려면 highslide-full.js를 사용해야합니다. 나는 이것이 누군가를 도와 주거나 나에게했던 것처럼 재미있게 보내길 바랍니다.

hs.addEventListener(document, 'click', function(e) { 
    e = e || window.event; 
    var target = e.target || e.srcElement; 

    // if the target element is not within an expander but there is an expander on the page, close it 
    if (!hs.getExpander(target) && hs.getExpander()) hs.close(); 
}); 

(: 여기

Answer 2

어쩌면 내가 뭔가를 놓친 것일 수 있습니다. 그러나 왜 당신이 바퀴를 재발 명하려고하는지 이해하지 못합니다. Highslide JS에는 이미이 기능이 내장되어 있습니다. 디밍 불투명도를 0이 아닌 값으로 설정하면 페이지의 아무 곳이나 클릭하면 확장기가 닫힙니다.

<script type="text/javascript"> 
    hs.dimmingOpacity = 0.75; 
</script> 
<style type="text/css"> 
.highslide-dimming { 
    background: black; 
} 
</style> 

희미한 배경을 실제로 원하지 않으면 값을 0.0001과 같이 설정하십시오.

Answer 3

, 그리고 비열한 바로 가기를 사용하여 "불쾌"일하지 않고도 Highslide JS가 제공하는 전용 도구를 사용하여, 혼합으로 jQuery를 드래그하지 않고 그것을 할 수있는 방법 원래 Highsteide JS 개발자 인 Torstein이 6 년 전에 게시했습니다.)