Jssor 슬라이더 - 엄지 손가락 이미지

Question

에 체크 박스를 추가하는 방법이 작동하지 않는 각 엄지 손가락 이미지

<div u="slides" style="cursor: move; position: absolute; left: 140px; top: 20px; width: 410px; height: 450px; overflow: hidden;"> 
    <div> 
     <input type="checkbox" id="chk1" />   
     <img u="image" src="../img/travel/01.jpg" /> 
     <img u="thumb" src="../img/travel/thumb-01.jpg" /> 
    </div> 
    <div>    
     <input type="checkbox" id="chk2" />   
     <img u="image" src="../img/travel/02.jpg" /> 
     <img u="thumb" src="../img/travel/thumb-02.jpg" /> 
    </div> 
</div> 

에 체크 박스를 추가하는 방법. UI의 확인란을 표시하지 않습니다.

는이 날 수 있습니다.

Answer 1

는

http://www.jssor.com/testcase/thumbnail-with-checkbox.source.html이 확인란을 선택하기 위해 다음과 같은 방법을 참고, 샘플을 참조하십시오.

 var thumbnailNavigatorContainer = $(".jssort07"); 
     var checkbox01 = thumbnailNavigatorContainer.find(".chk01"); 

Answer 2

는 항상 정적 요소에 대한 스타일의 위치, 상단, 왼쪽, 폭, 높이를 추가하십시오. 다음 코드

시도 BTW,

<div u="slides" style="cursor: move; position: absolute; left: 140px; top: 20px; width: 410px; height: 450px; overflow: hidden;"> 
    <div>   
     <img u="image" src="../img/travel/01.jpg" /> 
     <div u="thumb" style="background-image: url(../img/travel/thumb-01.jpg);" > 
      <input type="checkbox" id="chk1" style="position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; /> 
     </div> 
    </div> 
    <div>    
     <img u="image" src="../img/travel/02.jpg" /> 
     <div u="thumb" style="background-image: url(../img/travel/thumb-02.jpg);" > 
      <input type="checkbox" id="chk2" style="position: absolute; top: 10px; left: 10px; width: 20px; height: 20px; /> 
     </div> 
    </div> 
</div> 

, 당신은 당신의 썸네일에 대한 모든 HTML 코드를 사용할 수 있습니다.

---

코드를 검사하고 브라우저의 'inspect 요소'도구를 사용하여이를 감지하면 확인란이 다른 ui로 덮여있었습니다. 내가 확인하고 썸네일 네비게이터 스킨을 다음과 같이 테스트

  <div u="prototype" class="p" style="position: absolute; width: 99px; height: 66px; top: 0; left: 0;"> 
       <div class=w><thumbnailtemplate style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></thumbnailtemplate></div> 
       <div class=c> 
       </div> 
      </div> 

그 이유는 다음과 같이 '미리보기 네비게이터 스킨 02'에서 썸네일의 프로토 타입입니다, 그것은 확인을 작동합니다.

피부 \ 썸네일 - 07.source.html

피부 \ 썸네일 - 08.source.html

피부 \ 썸네일 - 11.source.html

피부 \ 축소판 - 12.source .html 중에서