Fancybox 2 Wysokość nie działa

Question

Próbuję uzyskać dwie różne wysokości z mojego fancyboxa, w zależności od tego, który link kliknie klienta, ale z jakiegoś powodu wysokość po prostu idzie do 100%. To nie dzieje się na wysokość Ja chce

To jest mój kod

$('.fancyboxhd').fancybox({ 
    width: 1287, 
    height: 720 
}); 
$('.fancyboxsd').fancybox({ 
    width: 640, 
    height: 360, 
}); 

Jest to zawartość iFrame

Answer 1

(patrz Edycja dla lepszej odpowiedzi)

W przypadku treści iframe Twój html powinien wyglądać tak:

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

następnie dodać te dwie opcje do swoich skryptów

fitToView : false, 
autoSize : false 

więc skrypty powinny wyglądać

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

### ### EDIT: (05 września 2013)

Kod można poprawić i uprościć za pomocą (HTML5) data-* atrybutów w kotwach i tego samego class dla obu opcji, takich jak:

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

Zobacz JSFIDDLE

UWAGA: W czasie tej edycji, demo używane fancybox v2.1.5.

Answer 2

dla v2.1.5 można tego użyć, używając id elementu html.

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