이미지 줌은 미리보기 이미지를 클릭 한 후에 라이트 박스에서만 작동합니다.

Question

축소판 이미지를 클릭하면 축소판이 작동하는 라이트 박스에 이미지 갤러리가 나타납니다. 확대/축소가 곧바로 작동해야합니다.

의견을 보내 주시면 감사하겠습니다.

여기 바이올린 http://jsfiddle.net/mbV3T/3/

HTML :

<div style='display:none'> 
    <div id='inline_content' style='padding:10px; background:#fff;'> 
     <div class="zoom-left" id="inline1" style="width:400px;display: block;"> 
      <img style="border:1px solid #e8e8e6;" id="zoom_03f"src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" 
       data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg" 
       width="411" /> 
      <div id="gallery_01f"> 
       <a href="#" class="elevatezoom-gallery active" data-update="" 
        data-image="http://www.elevateweb.co.uk/wp-content/uploads/2012/01/dp.gif" 
        data-zoom-image="http://www.elevateweb.co.uk/wp-content/uploads/2012/01/dp.gif"> 
        <img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" width="100" /> 
       </a> 
       <a href="#" class="elevatezoom-gallery" 
        data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png" 
        data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg" 
        ><img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png" width="100" /> 
       </a> 
       <a href="tester" class="elevatezoom-gallery" 
        data-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" 
        data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg"> 
        <img src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" width="100" /> 
       </a> 
      </div> 
     </div> 
    </div> 
</div> 

JS는 :

$(document).ready(function() { 
    $('.fancybox').fancybox(); 
    $(".inline").colorbox({inline:true, width:"50%"}); 
    $("#zoom_03f").elevateZoom({ 
     constrainType:"height", 
     constrainSize:274, 
     zoomType: "lens", 
     containLensZoom: true, 
     gallery:'gallery_01f', 
     cursor: 'pointer', 
     galleryActiveClass: "active" 
    }); 
    $("#zoom_03f").bind("click", function(e) { 
     var ez = $('#zoom_03f').data('elevateZoom'); 
     ez.closeAll(); // NEW: This function force hides the lens, tint and window 
     $.fancybox(ez.getGalleryList());  
     return false; 
    }); 
}); 

Answer 1

이 colorbox가 elevateZoom 구성을 방해하는 것으로 보인다. 이 문제를 해결하는 한 가지 방법은 다음과 같이 colorbox가 완료된 후 확대/축소 플러그인을 초기화하는 것입니다.

$(document).bind('cbox_complete', function(){ 
    $("#zoom_03f").elevateZoom({...options here...}); 
});