2013-09-23 1 views
0

저는 잠시 동안 놀았지만 jqzoomed 요소에서 실행되는 바인드 된 클릭 이벤트를 얻을 수 없습니다.jqzoom에 click 이벤트를 바인딩하여 fancybox를 시작합니다.

HTML :

<div class="product-clicktozoom-image"> 
    <div class="product-clicktozoom-image-main"> 
     <a href="http://example.com/image.jpg" class="jqzoom" title="Image" rel="gall"><img itemprop="image" id="mainimage" src="http://exampe.com/image.jpg" alt="Image" title="Image"/></a> 
    </div> 
</div> 

JS : 마지막 페이지 구조는 실제로 다음과 같습니다 있도록

jQuery(document).load(function() { 
    jQuery('#mainimage').bind('click',function(){ 
      var fancyImage = jQuery('#mainimage').attr('src');    
      jQuery.fancybox.open(fancyImage); 
    }); 
}); 

jqzoom 추가 DIV 년대의 몇 가지를 만듭니다

<div class="product-clicktozoom-image-main"> 
    <a href="example.com/image.jpg" class="jqzoom" title="" rel="gall" style="outline-style: none; text-decoration: none;"> 
     <div class="zoomPad"> 
      <img itemprop="image" id="mainimage" src="http://example.com/image.jpg" alt="Image" title="Image" style="opacity: 1;"> 
       <div class="zoomPup" style="display: none; top: 105px; left: 145px; width: 126px; height: 126px; position: absolute; border-width: 1px;"></div> 
       <div class="zoomWindow" style="position: absolute; z-index: 5001; cursor: default; left: 0px; top: 0px; display: none;"> 
        <div class="zoomWrapper" style="border-width: 1px; width: 355px; cursor: crosshair;"> 
         <div class="zoomWrapperTitle" style="width: 100%; position: absolute; display: none;"></div> 
         <div class="zoomWrapperImage" style="width: 100%; height: 355px;"> 
          <img src="http://example.com/image.jpg" style="position: absolute; border: 0px; display: block; left: -411.26760563380276px; top: -298.5915492957746px;"> 
         </div> 
        </div> 
       </div> 
       <div class="zoomPreload" style="visibility: hidden; top: 156px; left: 132.5px; position: absolute;">Loading zoom</div> 
     </div> 
    </a> 
</div> 

나는 tr을 가졌다. #mainimage에 click 이벤트를 바인딩하고 zoomPad 클래스와 함께 zoomWrapperImage 요소 내의 img도 마우스 오버 할 때 맨 위에 표시됩니다.

확대/축소를 클릭하면 fancybox에 전체 이미지가 열리고 싶습니다 (현재 마우스 오버시 줌이 발생 함). 나는 fancybox를 알고있다. open (fancyImage); 작동, 나는 콘솔에서 직접 click 함수에서 코드를 성공적으로 실행할 수 있습니다. 단지 클릭 이벤트 자체에서 발생시킬 수는 없습니다.

도움말!

+0

당신거야 가능성이 매우 플러그인 별이와 함께 질문을 도움이 필요한 경우 jsFiddle을 만들어야합니다. [여기에는 fancybox 및 jqzoom으로 사전 구성된 피들] (http://jsfiddle.net/TBfZ4/)이 있습니다. 원하는대로 사용자 정의하고 '업데이트'한 다음 질문을 수정하고 다른 사용자의 URL을 게시하십시오. 외부 리소스 아코디언을 주목하십시오 - 여기에서 추가 js에 대한 CDN을 지정합니다 (참고 : no http :). – gibberish

답변

2

이것은 결국 간단하게 나타났습니다. click 이벤트는 .zoomPad에 바인딩해야하고 모든 요소가로드되었는지 확인하기 위해 (document) .ready 대신 window.load를 사용했습니다.

최종 JS :

jQuery(window).load(function() { 
    jQuery('.zoomPad').bind('click',function(){ 
      var fancyImage = jQuery('.zoomWrapperImage img').attr('src');  
      jQuery.fancybox.open([{href : fancyImage}], {closeClick : true}); 
    }); 
});