Question

我正在使用一个可以显示图像，youtube视频链接和其他视频的精美框。用户可以在花式框中导航以转到下一个显示或先前的显示。我的问题是花哨的盒子没有根据显示的内容重新调整大小。我的代码如下：

$.fancybox(href,{
                'autoScale': true,
                'autoDimensions': true,
                'padding': 30,
                'transitionIn': 'none',
                'transitionOut': 'none',
                'type': 'iframe', //'iframe', //'image',
                'changeFade': 300,
                'cyclic': false,                  

            });

我试过通过调用“onComplete”中的函数来解决这个问题，但到目前为止还没有成功。请提供几点意见。

由于

Answer 1

将“autoScale”设置为false应该有效...

Answer 2

我不是网络开发者，但是documentation说：

$.fancybox.resize      Auto-resizes FancyBox height to match height of content

这就是你想要的吗？

Answer 3

你需要在旧的fancybox中调用一个新的fancybox。如果你从第一个中打开一个新的fancybox，它将自己调整大小。尝试：

<script type="text/javascript">
$(document).ready(function() {
  var content = '
  <div id="nextbox">Box 1</div>

  <script type="text/javascript">
  $("#nextbox").click(function() {
    $.fancybox('Box2',{
      'autoDimensions': false,
      'height' : 400,
      'width' :400
    });
  });
  </script>
  ';

  $.fancybox(content,{
    'autoDimensions': false,
    'height' : 200,
    'width' : 200
  });

</script>

这将打开一个名为“Box 1”的花式框。单击“Box 1”时，它将从200px调整为200px，调整为400px，调整为400px，并将文本更改为“Box 2”。你可以随意为多个盒子继续这样做。

我看到这个问题已经过时了，但是希望有人可以使用这个，因为我在很长一段时间内都在努力寻找如何在启动后重新调整fancybox的大小。

Answer 4

在我使用Fancybox 2的情况下，该设置被称为fitToView

将其设为真

这是我用来启动fancybox的东西，你不需要把它准备好了

(function($){
    $(document).on('click','.fancybox',function(e){
        //don't follow link
        e.preventDefault();

        //update fancybox image registry for gallery and open it
        var fbox = $('.fancybox');
        //this always opens the first image first
        $.fancybox(fbox,{
            index: fbox.index(this),
            padding: 5,
            live: false,
            helpers : {
                overlay : {
                    css : {
                        'background-color' : 'rgba(17, 17, 17, 0.3)',
                    },
                    closeClick: true,
                    showEarly : true,
                    locked : false //if true, causes background to jump
                },
                thumbs  : {
                    width   : 140,
                    height  : 100,
                    source  : function(item) {
                        var href = $(item.element).data('thumb');
                        if(typeof href === 'undefined'){
                            if (item.element) {
                                href = $(item.element).find('img').attr('src');
                            }
                            if (!href && item.type === 'image' && item.href) {
                                href = item.href;
                            }
                        }
                        return href;
                    }
                }
            },
            scrolling: 'visible',
            fitToView: true,
            iframe:{
                scrolling : 'auto',
                preload   : false
            }
        });
    });
})(jQuery);

Fancybox调整大小

4 个答案: