Fancybox 2 Altezza non funzionante

Question

Sto provando a ottenere due altezze diverse dalla mia casella fancybox a seconda del collegamento su cui fa clic il client, ma per qualche motivo l'altezza continua sempre al 100%. Non sta andando all'altezza sto volendo

Questo è il mio codice

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

Si tratta di un contenuto iFrame

Answer 1

(vedere modifica sotto per una migliore risposta)

Per i contenuti iframe, il tuo html dovrebbe apparire come

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

quindi aggiungere queste due opzioni per i vostri script

fitToView : false, 
autoSize : false 

così i vostri script dovrebbe essere simile

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

### EDIT ###: (5 set 2013)

Il codice può essere migliorato e semplificato utilizzando gli attributi (HTML5) data-* negli ancoraggi e lo stesso class per entrambe le opzioni come:

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

Vedere JSFIDDLE

NOTA: Al momento di questa modifica, demo utilizzato fancybox v2.1.5.

Answer 2

per v2.1.5 è possibile utilizzare questo utilizzando l'id dell'elemento 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; 
      } 
     } 
    });