1

frameWidthオプションとframeHeightオプションを使用して、インラインコンテンツとiframeコンテンツのフレームサイズを制御できることは知っていますが、画像を表示するときにフレームサイズを手動で制御するにはどうすればよいですか？

私の問題は、ファンシーボックスに表示したい画像が非常に水平で、垂直方向にはあまりないことです。fancyboxはそれを拡大縮小するので、ライトボックスは非常に広く、それほど高くはありません。つまり、画像をまったく見ることができません。

ライトボックス内で画像を水平方向にスクロールさせたいのです。（いいえ、画像を変更することはできません）。

何かご意見は？

FancyBoxWebサイト

4

4 に答える 4

3

結局、FancyBoxをハッキングして、やりたいことを実行するための別のオプションを追加しました。要点は次のとおりです。

if (opts.imgManSize) { 
   _set_content('<img alt="" id="fancy_img" src="'+imagePreloader.src+'" />',opts.imgWidth,imagePreloader.height+20);
} else {
   _set_content('<img alt="" id="fancy_img" src="'+imagePreloader.src+'" />',width,height);
}

...

if (opts.imgManSize) { 
  $("#fancy_content").css('overflow','auto');
}

...

if (opts.imgManSize) { 
  $('#fancy_img').css('width','auto');
}

...

$.fn.fancybox.defaults = {
   ...
   imgManSize:false,
   imgWidth:425,
   imgHeight:355,
   ...
}

チャームのように機能します。

于 2009-10-12T14:51:54.233 に答える
3

CSSを変更することで、画像のサイズに応じてフレームサイズを調整できます。

プラグインが作成する幅と高さの宣言を上書きするには、次を追加します。

#fancybox-inner {
    width: auto!important;
    height: auto!important;
}

#fancybox-wrap{
    width: auto!important;
    height: auto!important;
}

と削除position:absoluteします#fancybox-inner

于 2010-03-16T14:28:51.420 に答える
2

私は自分でこの問題を抱えており、見つけた既存のスニペットに基づいて新しいVimeoIFRAMEのビデオを埋め込むためにこれを解決するためのコードをいくつか作成しました。これにより、FancyboxごとにWIDTHとHEIGHTのURLパラメータを追加できるようになります。それらを追加しない場合、デフォルトでは、90％と90％の高さのIFRAMEが開きます。

(function($){ 
    $(function(){
        // Fancybox: IFRAME
        var fancybox_iframe = $('.fancybox-iframe');
        if (fancybox_iframe.length > 0){
            fancybox_iframe.each(function(index){
                // Inline frame width param
                if( $(this).attr('href').match(/width=[0-9]+/i) ){
                    var fWidth = parseInt($(this).attr('href').match(/width=[0-9]+/i)[0].replace('width=',''));
                } else {
                    var fWidth = '90%';
                }
                // Inline frame height param
                if( $(this).attr('href').match(/height=[0-9]+/i) ){
                    var fHeight = parseInt($(this).attr('href').match(/height=[0-9]+/i)[0].replace('height=',''));
                } else {
                    var fHeight = '90%';
                }
                if(window.console&&window.console.log) { 
                    console.log('fWidth #'+index+': '+fWidth); 
                    console.log('fHeight #'+index+': '+fHeight); 
                }
                $(this).fancybox({
                    'titlePosition' : 'inside',
                    'type'              : 'iframe',
                    'autoScale'         : true,
                    'padding'           : '10',
                    'width'             : fWidth,
                    'height'                : fHeight,
                    'centerOnScroll'    : true
                });
            });
        }
    });
})(jQuery);

これを使用するには、次を使用します。

<a href="http://player.vimeo.com/video/16429685?color=ffffff&width=800&height=450" class="fancybox-iframe" title="Citizen Schools 101">Inline Vimeo Video</a>

これが誰かを助けてくれることを願っています！

于 2010-12-06T18:33:26.707 に答える
0

画像をdiv（インラインの場合）またはajaxロードを使用している場合はページでラップします。次に、divのスタイルをiframの幅に設定し、overflow css属性をoverflow：scrollに設定します。

于 2009-08-11T16:19:14.950 に答える