아약스로 콘텐츠를로드 한 후 Fancybox 2 위치를 바꿉니다.

Question

아약스로 fancybox를로드하고 있으며 대부분의 콘텐츠가 큰 이미지입니다. fancybox가 중앙에로드되지만 이미지가 더 오래 걸리고 높이가 커지므로 이제 화면의 하단 절반에있게됩니다.

이미지 크기가 다르기 때문에 고정 된 높이를 설정할 수 없습니다. 이미지 로딩이 끝난 후에 이미지의 위치를 ​​다시 잡아야한다고 가정하지만 부족한 문서 때문에 어떻게해야할지 모르겠습니다.

위치 조정 기능이 있지만 작동 방식이 적용되지 않는 것으로 알고 있습니다. 나는 이미지가 로딩을 끝내고 위치 조정 기능을 적용했는지 어떻게 든 체크해야 할 필요가 있다고 생각한다.

$(window).load(function() { 
    $('.fancybox_gallery_wrapper') 
     .fancybox.showLoading() 
      .fancybox({ 
     openEffect : 'none', 
     closeEffect : 'none', 
     prevEffect : 'none', 
     nextEffect : 'none', 
     maxWidth : 900, 
     maxHeight : 700, 
     fitToView : false, 
     width  : '50%', 
     arrows  : true, 
     helpers : { 
      media : {}, 
      buttons : {}, 
      overlay : { 
       css : { 
        'background' : 'rgba(0,0,0,0.8)' 
       } 
      } 
     } 
    }); 
}); 

이미지가로드를 완료하고 때 다음 화면의 중앙에 멋진 상자의 위치를 ​​확인하는 가장 좋은 방법은 무엇입니까 :

나는 현재와 멋진 상자를 호출하는거야?

Answer 1

는 fiddle

$(".fancybox") 
    .attr('rel', 'gallery') 
    .fancybox({ 
     padding : 0, 
     margin  : 5, 
     nextEffect : 'fade', 
     prevEffect : 'none', 
     afterLoad : function() { 
      $.extend(this, { 
       aspectRatio : false, 
       type : 'html', 
       width : '70%', // pop up image width - set as required 
       height : '70%', // pop up image height- set as required 
       content : '<div class="fancybox-image" style="background-image:url(' + this.href + '); background-size: cover; background-position:50% 50%;background-repeat:no-repeat;height:100%;width:100%;" /></div>' 
      }); 
     } 
    });