Make image in fancybox bigger

Question

I'm using Fancybox 2.1.7 and need to have the image that pops-up in to the fancybox to be bigger than the size of the original image. HOw can I control that?

link example:

<a href="https://dummyimage.com/300x200/000/fff.png" class="fb-movie2" data-fancybox-type="iframe2"><img src="https://dummyimage.com/300x200/000/fff.png"/></a>

My script:

$(".fb-movie2").fancybox({
      'type' : 'image',
      'width' : 600,
      'height' : 400,
      'scrolling' : 'no',
      'autoSize' : false,
        helpers : {
            overlay : {
                locked : false,
                css : {
                    'background' : 'rgba(0, 0, 0, 0.8)'
                }
            }
        }  
      });

so would like the "fancybox" image to be 1.5 times bigger.

Answer 1

You can try this code.

$(".fb-movie2").fancybox({
      'type' : 'image',
       beforeShow: function () {
         $(".fancybox-image").css({
            "width": 1200,
            "height": 1200
        });
        this.width = 1200;
        this.height = 1200;
       },
      'width' : 600,
      'height' : 400,
      'scrolling' : 'no',
      'autoSize' : false,
        helpers : {
            overlay : {
                locked : false,
                css : {
                    'background' : 'rgba(0, 0, 0, 0.8)'
                }
            }
        }  
      });

Here is a codepen link.

https://codepen.io/smitraval27/pen/VXbvrx/

Update

For fancybox version 2.1.3+ use this code.

http://jsfiddle.net/SmitRaval/kjr87zud/1/