How can I stop fancybox from resizing?

Question

I am a beginner, so I have limited knowledge on coding. I am trying to create a website that uses fancybox2 for its image galleries. I added a Facebook like button and Facebook comment box for each photo. Here's my code:

$(".fancybox").fancybox({


beforeShow: function () {
    if (this.title) {
    currentHref = this.href;

    this.title += '<br /> <br/>'; // Line break after title


    this.title += '<div class="fb-like" style="margin:0; padding:0" data-href="' + currentHref + '" data-width="400" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"></div>';

    this.title += '<br />'; // Line break after title

    this.title += '<div class="fb-comments" data-href="http://mundonimona.com/' + currentHref + '" data-num-posts="2" data-width="400"></div>';
    }
},
afterShow: function () {
    FB.XFBML.parse();


},
helpers: {
    title: {
        type: 'inside'
    }
}

});

http://jsfiddle.net/brewhildah/999Ly4vm/9/

The Facebook like and comment box worked in the website. The problem is the photos are getting resized after the Facebook plugins are loaded. They all become smaller. How can I ensure that the the slides do not resize even after the Facebook things have loaded (so that viewing the photos and moving from one slide to another will go smoothly).

Thank you for your help!

Answer 1

You could combine fitToView and maxWidth API options to achieve that like :

$(".fancybox").fancybox({
    fitToView: false,
    maxWidth: "85%",
    // other API options
});

See your forked JSFIDDLE