. 확대/축소가 작동하지 않습니다.

Question

여러 개의 fancybox 갤러리를 미리보기 이미지로 설정하고 확대/축소를 높이려고합니다. 지금까지 전 전자를 모두 가지고 있지만 표시 줌을 얻을 수 없습니다. 검색 후 나는이 게시물 https://stackoverflow.com/a/23883542/6774425 내가 따라하지만 확대 효과를 얻을 수없는 것으로 나타났습니다.

여기 내 코드입니다.

html로 이미지는 줌

$(".fancybox").fancybox({ 
     afterShow: function() { 
      $('.fancybox-image').elevateZoom({ 
      zoomType: "inner", 
cursor: "crosshair", 
zoomWindowFadeIn: 500, 
zoomWindowFadeOut: 750 
      }); 
     } 
     }); 

의 유형을 변경, 내가 같은 자바 스크립트를 사용이

<a class="fancybox fancybox-image fancybox-thumbs" rel="gallery1" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" /><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" alt="" /></a> 

처럼 감싸하지만 난 그것을 확대 얻을 수없는 것. 여기 codepen

당신은 내가 아직도 그 이미지의 크기로 확대해야한다고 생각 상단의 첫 번째 이미지가

을 왼쪽 클릭 할 수 있습니다. 하지만 난뿐만 아니라 일부 맥주의 이미지를 시도하고 변화를 보이지 않았다, 적어도 마지막으로 나는이 http://codepen.io/anon/pen/amoAOO

<div class="grid-item car"> 
    <a class="fancybox fancybox-image fancybox-thumbs" rel="gallery1" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" /><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" alt="" /></a> 
    </div> 

<div class="hidden"> 
    <a class="fancybox fancybox-image fancybox-thumbs" rel="gallery1" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" /><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" alt="" /></a> 
    </div> 

있어 Dekel의 도움으로

=== 그래서 그것을 시도

하지만 두 번째 이미지가 첫 번째 이미지보다 작고 왼쪽 상단에 마우스를 올리면 버그가 있습니다. 이전 이미지는 http://imgur.com/a/o6OGP

http://codepen.io/soursocks/pen/GjKZag/?editors=1010

Answer 1

1. 당신은 $('.fancybox-thumbs') 부분의 afterShow 내부의 elevateZoom 코드를 삽입해야 나타납니다.
2. img.fancybox-image (.fancybox-image이 아닌)을 실행하려면 elevateZoom이 필요합니다.
3. fancybox를 닫은 후에도 elevateZoom 요소를 제거해야한다는 사실을 잊지 마십시오. 여기

   $('.fancybox-thumbs').fancybox({ 
       prevEffect : 'none', 
       nextEffect : 'none', 
   
       closeBtn : false, 
       arrows : false, 
       nextClick : true, 
   
       autoCenter: true, 
   
       helpers : { 
        thumbs : { 
         width : 75, 
         height : 75 
        } 
       }, 
       afterShow: function() { 
        $('.zoomContainer').remove(); 
        $('img.fancybox-image').elevateZoom({ 
         zoomType: "inner", 
         cursor: "crosshair", 
         zoomWindowFadeIn: 500, 
         zoomWindowFadeOut: 750 
        }); 
       }, 
       afterClose: function() { 
        $('.zoomContainer').remove(); 
       } 
   }); 
   

   새로운 codepen입니다 : http://codepen.io/anon/pen/amoAOO

   업데이트

   다른 이미지 크기 문제를 해결하기 위해 추가해야합니다 여기

코드입니다

$('.zoomContainer').remove(); 

afterShow: function() { 콜백 내부.