web-dev-qa-db-ja.com

Fancybox2の高さが機能しない

クライアントがクリックしたリンクに応じて、ファンシーボックスから2つの異なる高さを取得しようとしていますが、何らかの理由で高さが100％のままになっています。思った高さにはならない

これは私のコードです

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

それはiFrameコンテンツです

jqueryfancybox
12
dpDesignz

（改善された回答については、以下の編集を参照してください）

Iframeコンテンツの場合、HTMLは次のようになります。

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

次に、これら2つのオプションをスクリプトに追加します

fitToView   : false,
autoSize    : false

したがって、スクリプトは次のようになります。

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

###編集###：( 2013年9月5日）

コードは、アンカーの（HTML5）data-*属性と、次のような両方のオプションに同じclassを使用して、改善および簡略化できます。

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

[〜＃〜] jsfiddle [〜＃〜]を参照してください

[〜＃〜] note [〜＃〜]：この編集の時点で、デモではfancyboxv2.1.5を使用していました。

56
JFK

v2.1.5の場合、html要素のIDを使用してこれを使用できます。

<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;
            }
        }
    });
0
reza.cse08

set autoScale：false、

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