2012-04-24 24 views
11

Estoy tratando de obtener dos alturas diferentes de mi fancybox, dependiendo de qué enlace haga clic en el cliente, pero por alguna razón la altura simplemente sigue al 100%. No va a la altura de lo que estoy queriendoFancybox 2 Altura no funciona

Este es mi código

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

Es un contenido iFrame

Respuesta

55

(ver editar a continuación para una respuesta mejorada)

Para contenido de iframe, su html debe verse como

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

continuación, agregue estas dos opciones para las secuencias de comandos

fitToView : false, 
autoSize : false 

por lo que sus secuencias de comandos debe ser similar

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

### EDITAR ###: (sep 05 2013)

El código se puede mejorar y simplificar utilizando atributos (HTML5) data-* en los anclajes y el mismo class para ambas opciones, como:

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

Ver JSFIDDLE

NOTA: En el momento de esta edición, de demostración utilizado FancyBox v2.1.5.

+0

Gracias. Trabajó. : D – dpDesignz

+0

funcionó. muchas gracias. – amilaishere

+0

trabajó aquí también: D gracias – rafuru

0

para v2.1.5 puede usar esto usando el id del 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; 
      } 
     } 
    }); 
Cuestiones relacionadas