Question

我需要在精美的方框中将此图库显示为http://tympanus.net/Tutorials/ResponsiveImageGallery/。它工作得很好，除了一个设计问题，fancybox首次没有出现在中心，因为它必须首次下载少量图像如果第二次打开相同的相册然后在中心正确显示所有图像都被缓存。我尝试使用以下代码解决此问题，但它不起作用

我不能给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包装时调用$.fancybox.center();和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

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

如何在fancybox-wrap高度更改时调用fancybox resize函数

5 个答案: