Fancybox resize

I am using a fancy box which displays images, youtube video link and other videos. The user can navigate in the fancy box to go to next display or previous display. My problem is the fancy box doesn't get re-sized based on the displayed content. My code is as below:

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

            });

I have tried solving this issue by calling a function in "onComplete" but no success till now. Please provide few inputs on th开发者_如何学Gois.

Thanks

setting "autoScale" to false should work...

I'm not a web developer by any means, but the documentation says:

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

Is that what you want?

You need to call a new fancybox within the old one. If you "open" a new fancybox from within the first one, it will resize itself. Try:

<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>

This will open up a fancybox that says "Box 1". When you click on "Box 1" it will resize from 200px by 200px to 400px by 400px and change text to "Box 2". And you can keep on doing this for as many boxes as you want.

I see the question is old, but hope someone can use this as I struggled a long time myself finding out how to resize fancybox once it was initiated.

In my case while using Fancybox 2 the setting was called fitToView

set it to true

here is what I use to launch fancybox, you do not need to put it in ready

(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);