1

我需要在花哨的框中显示这个画廊为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 wrapper 发生变化时调用fancybox.center()和运行。$.fancybox.center();fancybox-wrap

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

但我不确定如何跟踪高度变化fancybox-wrap并将重新定位称为花哨的盒子。

Fancybox V 1.3.4 对此的帮助表示赞赏。

更新：

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

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

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

4

5 回答 5

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>
于 2014-10-15T08:07:44.207 回答
2

设置autoSize为 false 以设置 fancybox 的宽度和高度。IE

$(".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();
    }
});

希望这对您有所帮助。

于 2013-10-01T05:51:17.257 回答
1

如果您的 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

于 2014-12-23T10:27:24.297 回答
0

解决方案，我设法通过在延迟 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)
             }
    });

我相信当图像完全下载然后调用$.fancybox.center();函数时，会使用 jquery 来检查更专业的方法

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

于 2013-10-01T08:22:09.683 回答
-1

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

于 2013-10-01T05:50:26.427 回答