当fancybox-wrap高度改变时如何调用fancybox resize函数

Question

我需要在花哨的盒子中将这个画廊显示为http://tympanus.net/Tutorials/ResponsiveImageGallery/。它工作正常，除了一个设计问题是第一次没有出现在中心，因为如果第二次打开同一个相册，它必须第一次下载少量图像，然后它会在中心正确显示，因为所有图像都被缓存.我尝试使用以下代码解决此问题，但它不起作用

由于图像尺寸不同，我不能给 fancybox 固定宽度和高度

$(".fancybox-frame").fancybox({
    maxWidth: 740,
    maxHeight: 600,
    fitToView: false,
    width: '70%',
    height: '70%',
    autoSize: true,
    closeClick: true,
    hideOnOverlayClick: true,
    openEffect: 'none',
    closeEffect: 'none',
    onComplete: function () {
        $.fancybox.resize();
        $.fancybox.center();
    }
});

我能想到的其他解决方案是调用fancybox.center() 和$.fancybox.center(); 函数，当fancybox 包装器更改fancybox-wrap。

这可以帮助我正确地重新定位中心的fancybox。

但我不确定如何跟踪 fancybox-wrap 的高度变化并调用重新定位花哨的框。

Fancybox V 1.3.4 感谢您提供这方面的帮助。

更新：

只是为了给你一个想法，我在这个链接上遇到了类似的问题。

http://www.picssel.com/playground/jquery/getImageAjax.html

当您第一次点击它时，它是一个小花式框，并且在下载图像时不会重新调整大小。在我的情况下，我必须下载多个图像，并且显示中间的第一张图像需要时间采用默认值，但在下载第一张图像时不会调整大小。

Answer 1

将autoSize 设置为false，以便为fancybox 设置宽度和高度。即

$(".fancybox-frame").fancybox({
    maxWidth: 740,
    maxHeight: 600,
    fitToView: false,
    autoSize: false,
    width: '70%',
    height: '70%',
    closeClick: true,
    hideOnOverlayClick: true,
    openEffect: 'none',
    closeEffect: 'none',
    onComplete: function () {
        $.fancybox.resize();
        $.fancybox.center();
    }
});

希望对你有所帮助。

Answer 2

动态内联内容加载

  function loadAnswer(id){    
    jQuery.fancybox({       
      'content' : jQuery("#outerFAQ"+id).html(),        
       /*For Auto height and width*/
       'onComplete' : function(){
          jQuery('#fancybox-wrap').css({height:'auto',width:'auto'});
          jQuery.fancybox.resize();
          jQuery.fancybox.center(); 
        }
      }); 
    }

/*Dynamically Set the id and passing it to function*/  
 <a class="fancybox"  href="#" onClick="loadAnswer(<?php echo $data->getId()/*Dynamic id*/ ?>);"> Demo </a>

    <div id="outerFAQ<?php echo $data->getId(); ?>"  style="display:none;"> 
      <div id="ans<?php echo $data->getId();?>">
        demo        
      </div>
    <div>

单个内联内容加载

   jQuery( "#demo" ).click(function() {
      jQuery.fancybox({
        'content' : jQuery("#demoContent").html(),
        onComplete: function () {
        /*Static height width*/  
        jQuery("#fancybox-content").css({
          height:'500px',
          overflow:'scroll',
        });
        jQuery("#fancybox-wrap").css("top","10");
        jQuery(".fancybox-wrap").css("position", "absolute");
      }
    });

    <a  id="demo"  href="#">Click me</a>

    <div style="display: none">
      <div id="demoContent">
        demo
      </div>
    </div> 

Answer 3

如果您的 fancybox 已经打开并且想要调整大小，那么下面的代码会帮助您。

      $.ajax({
                url: 'YOUR URL',
                data:'DATA WANT TO TRANSFER',
                type: 'post'
                dataType: "text",
                success:function(result){                       
                    //PLAY WITH RESULT SET

                    $.fancybox.toggle();

                },
                error:function(request,error){
                    alert("Error occured : "+error);

                }
            });

参考来自：Resize Fancybox

Answer 4

解决方案，我设法通过在延迟 3 秒后调整大小来使其工作，到那时第一张图片已完全下载

    $(".fancybox-iframe").fancybox({
        width: '70%',
        height: '70%',
        hideOnOverlayClick: true,
        centerOnScroll:true,
        onComplete : function(){
            // $.fancybox.resize();
            // $.fancybox.center();
             var resize = setTimeout(function () {
                 $.fancybox.center();
             }, 3000)
             }
    });

我相信更专业的方法是在图像下载完成后使用jquery进行检查，然后调用$.fancybox.center();函数

请如果这样可以，或者我们可以用其他方式来做。

Answer 5

您是否尝试过使用您的fancybox 中的<center></center> 包含？我想它会在你的页面上工作。并且不需要使用java，因为你只是想用它作为中心。