CODEWITHSUNDEEP
fancybox
San
San

Reputation: 11

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

Thanks

Upvotes: 1

Views: 7180

Answers (4)

Timo Huovinen
Timo Huovinen

Reputation: 55683

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

Upvotes: 0

skoTner
skoTner

Reputation: 168

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.

Upvotes: 0

user951595
user951595

Reputation: 11

setting "autoScale" to false should work...

Upvotes: 1

Kevin Vermeer
Kevin Vermeer

Reputation: 2852

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?

Upvotes: 0

Related Questions