Fancybox 2 Height not working

Question

I\'m trying to get two different heights from my fancybox depending on which link the client clicks on, but for some reason the height just keeps going to 100%. It\'s not go

Answer 1

(see edit below for an improved answer)

For iframe content, your html should look like

<a class="fancyboxhd fancybox.iframe" href="hdfile.html">hd</a>
<a class="fancyboxsd fancybox.iframe" href="sdfile.html">sd</a>

then add these two options to your scripts

fitToView   : false,
autoSize    : false

so your scripts should look like

$(document).ready(function(){
 $('.fancyboxhd').fancybox({
   width : 1287,
   height : 720,
   fitToView : false,
   autoSize : false
 });
 $('.fancyboxsd').fancybox({
   width: 640,
   height: 360,
   fitToView : false,
   autoSize : false
 });
});

### EDIT ### : (Sep 05, 2013)

The code can be improved and simplified using (HTML5) data-* attributes in the anchors and the same class for both options like :

HTML

<a class="fancybox fancybox.iframe" data-width="1287" data-height="720" href="hdfile.html">HD</a>
<a class="fancybox fancybox.iframe" data-width="640"  data-height="360" href="sdfile.html">SD</a>

JS

$('.fancybox').fancybox({
    fitToView: false,
    autoSize: false,
    afterLoad: function () {
        this.width = $(this.element).data("width");
        this.height = $(this.element).data("height");
    }
});

See JSFIDDLE

NOTE: At the time of this edit, demo used fancybox v2.1.5.

Answer 2

set autoScale : false,

$('.fancyboxhd').fancybox({
  width: 1287,
  height: 720,
  autoScale : false,
});

Answer 3

for v2.1.5 you can use this by using the id of html element.

<a id="item1" class="fancybox" href="http://fiddle.jshell.net/YtwCt/show/">Open 500x200</a>

<br />

<a id="item2" class="fancybox" href="http://fiddle.jshell.net/YtwCt/show/">Open 200x500</a>

<div id="test" style="display:none">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pulvinar, nulla eu interdum posuere, nisi mauris cursus nisi, nec faucibus nibh urna nec turpis.


$(".fancybox-wrap").draggable();
$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
        type: 'iframe',
        autoSize : false,
        beforeLoad : function() {         
            if ($(this.element).attr('id') == 'item1') {
                this.width  = 500;
                this.height = 200;
            }
        else {
                this.width  = 200;
                this.height = 500;
            }
        }
    });