썸네일에 오버레이 div가있는 경우 Fancybox가 작동하지 않습니다.

Question

Fancybox와 함께 사용해야하는 썸네일 목록을 준비했습니다. 그러나 마우스 위로 마우스를 올리면 미리보기 이미지의 색상이 바뀌고 제목이 표시되기를 원합니다 (클릭하기 전에 발생해야 함).

<script src="js/jquery-1.10.1.min.js"></script> 
<script src="js/jquery.fancybox.js"></script> 
<link href="css/jquery.fancybox.css" rel="stylesheet" media="screen"> 

<script><!-- I think you missed this --> 
var tpj=jQuery; 
tpj.noConflict(); 
tpj(document).ready(function() { 
    /* 
    * Simple image gallery. Uses default settings 
    */ 

    tpj('.fancybox').fancybox(); 

}); 
</script> 

<ul class="gallery"> 
     <li class="gallery-item"> 
      <a class="hover-wrap fancybox" href="Images/Img_0107.jpg" data-fancybox-group="gallery" ><img src="Images/gallery-1.jpg" alt=""> 
      </a> 
      <div class="overlay"> 
       <div class="overlay-text"> 
       <h3>The house</h3> 
        <span class="caption">The garden</span> 
       </div> 
      </div> 
     </li> 
     <li class="gallery-item"> 
      <a class="hover-wrap fancybox" href="Images/Img_0107.jpg" data-fancybox-group="gallery" ><img src="Images/gallery-2.jpg" alt=""> 
      </a> 
      <div class="overlay"> 
       <div class="overlay-text"> 
       <h3>The house</h3> 
        <span class="caption">The garden</span> 
       </div> 
      </div> 

     </li> 
    </ul> 

상대 CSS를 썸네일을 통해 사업부 (.overlay)를 가진하여 Fancybox은 '아무튼, 보인다

.gallery { 
    margin: 60px 0 0 0; 
    padding: 0; 
} 
.gallery-item { 
    width: 25%; 
    min-height: 100px; 
    margin: 0; 
    display: inline-block; 
    float: left; 
    overflow: hidden; 
    position: relative; 
} 
.gallery-item .hover-wrap { 
    position: relative; 
    display: block; 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
} 
.gallery-item img { 
    width: 100%; 
} 
.gallery-item img { 
    -webkit-transition: all 0.4s ease; 
    -moz-transition: all 0.4s ease; 
    -o-transition: all 0.4s ease; 
    transition: all 0.4s ease; 
} 
.gallery-item:hover img { 
    -webkit-transform: scale(1.1); 
    -moz-transform: scale(1.1); 
    -ms-transform: scale(1.1); 
    -o-transform: scale(1.1); 
    transform: scale(1.1); 
} 
.gallery-item .overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    display: block; 
    opacity: 0; 
    filter: alpha(opacity=0); 
    background-color: rgba(1, 188, 158, .75); 
    background-image: url(../Images/icon-magnifier.png); 
    background-position: center 40%; 
    background-repeat: no-repeat; 
    -webkit-transition: opacity 0.15s ease-in-out 0s; 
    -moz-transition: opacity 0.15s ease-in-out 0s; 
    -o-transition: opacity 0.15s ease-in-out 0s; 
    transition: opacity 0.15s ease-in-out 0s; 
} 
.gallery-item:hover .overlay { 
    opacity: 1; 
    filter: alpha(opacity=1); 
    cursor:pointer; 
} 
.gallery-item .overlay-text { 
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
} 
.gallery-item .overlay-text h3 { 
    font-size: 1.4rem; 
    color: #fff; 
    font-weight: normal; 
    margin-bottom: 0; 
} 
.gallery-item .overlay-text .caption { 
    font-family: 'OpenSans', serif; 
    font-style: italic; 
    color: #fff; 
    font-size: 1.6rem; 
    line-height: 28px; 
} 

을 다음과 같이 다음과 같이

나는 나의 HTML을 준비 내가 일하는게 틀린가? 문제에 관련된 기본 CSS 만 작성 했으므로 컨테이너의 전반적인 효과가 있어야하는 것은 아닙니다.

도움 주셔서 감사합니다. 당신이 .gallery-item 요소 click, 실제 대상이 .overlay선택 아닌 .fancybox선택 그래서 최신 발사 결코 극복 될 때

Answer 1

으로는 의견에서 지적했다.

당신은 그것의 .fancybox 형제 같은 선택을 트리거 .overlay에 대한 click이벤트 처리기를 추가해야 할 수 있습니다 : 당신이 의심으로

var tpj = jQuery; 
tpj.noConflict(); 
tpj(document).ready(function() { 
    /* 
    * Simple image gallery. Uses default settings 
    */ 
    tpj('.fancybox').fancybox(); 
    tpj(".overlay").on("click", function (event) { 
     event.preventDefault(); 
     tpj(this).siblings(".fancybox").trigger("click"); 
    }); // on 
}); 

이 JSFIDDLE