저는 잠시 동안 놀았지만 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 함수에서 코드를 성공적으로 실행할 수 있습니다. 단지 클릭 이벤트 자체에서 발생시킬 수는 없습니다.
도움말!
당신거야 가능성이 매우 플러그인 별이와 함께 질문을 도움이 필요한 경우 jsFiddle을 만들어야합니다. [여기에는 fancybox 및 jqzoom으로 사전 구성된 피들] (http://jsfiddle.net/TBfZ4/)이 있습니다. 원하는대로 사용자 정의하고 '업데이트'한 다음 질문을 수정하고 다른 사용자의 URL을 게시하십시오. 외부 리소스 아코디언을 주목하십시오 - 여기에서 추가 js에 대한 CDN을 지정합니다 (참고 : no http :). – gibberish