4

ウェブサイトでFancyboxを使用して写真を表示しています。写真を読み込んだ後、（JavaScriptを介して）ソーシャルボタンとFacebookコメントをタイトル領域に動的に追加します。私が抱えている問題は、通常どおりサイズを変更すると、画面のタイトルコンテンツにも合わせてサイズが変更されることです（コメントのおかげでかなり長くなる可能性があります）。

私の質問はこれです：画面上の写真に合うようにfancyboxのサイズを変更することはできますが、タイトル領域が画面からはみ出すことができますか？

minHeightを683に設定することで問題をある程度解決しました。これにより、写真が非常に小さくなり、コメントが画面に表示されなくなります。ここでの問題は、1080p画面では問題なく表示されることですが、それよりも小さい場合は、写真が大きすぎて画面からも流れてしまうことを意味します。

私がそれをうまく説明していない場合は、私のサイトでこれを見てください：http ://www.thejoecole.com/gallery/Places/Garden_of_the_Gods-1/photo-8#8

現在、コンテンツはコメントのビットに合うようにサイズ変更されていますが、minHeightによって制限されています。写真をもっと大きくして、画面の大部分を占め、下のタイトル領域を少しだけ表示して、ユーザーが下にスクロールしてコメントなどを表示できるようにしたいのです。

4

5 に答える 5

4

あなたはこれを試してみたいかもしれません：

JSを使用してウィンドウの幅と高さを計算し、コールバックbeforeShowとonUpdate：を使用して画像のサイズを動的に設定します。

beforeShow: function() {
    $('.fancybox-image')
        .width($(window).width())
        .height($(window).height());
},
onUpdate: function() {
    $('.fancybox-image')
        .width($(window).width())
        .height($(window).height());
},

これらの同様の質問もご覧ください。

于 2013-03-13T03:01:02.513 に答える
2

サイズの問題を確認するために、サイトを確認しました。私はいくつかのことに気づいたので、ここに私の提案と説明があります。

fancyboxはコンテナdivのように動作するため、子のdivの内容に合わせて調整されます。 fancybox-skin2つの直接の子divがfancybox-outerあり、fancybox-title fancybox-title-inside-wrap

<div class="fancybox-skin" style="padding: 0px; width: auto; height: auto;">
    <div class="fancybox-outer">
        <div class="fancybox-inner" style="overflow: visible; width: 493px; height: 323px;">
            <img class="fancybox-image" src="/photos/Places/Garden of the Gods/IMG_0345.jpg" alt="">
        </div>
        <a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a><a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>
    </div>
    <div class="fancybox-title fancybox-title-inside-wrap" style="height: auto;">
    ...
    </div>
</div>

fancybox-title fancybox-title-inside-wrapがheight: auto;設定されています。そのため、画像の高さに問題を引き起こす高さを増やすことで、内部に与えられたコメントに適応し続けます。これを修正するには、スタイルを。に設定しますheight: 200px;。!importantそれが機能しない場合は入れてみてください。これはすべて動的であるため、cssとjavascriptの両方を確認してください。

アップデート

コメントによると、fancybox.update（）を呼び出すたびに高さがautoに設定されます。したがって、自動サイズ変更を防ぐために、fancyboxオプションを変更する必要があります。これがあなたができることです：

$("a.yourlink").fancybox({
    'width'             :   500,
    'height'            :   200,
    'autoScale'         :   false,         //if using older fancybox
    'autoSize'          :   false,         //if using newer fancybox
    'autoDimensions'    :   false,
});

ここに記載されているfancybox2.0以降のオプションを調べる必要があります。

于 2013-03-09T20:54:44.460 に答える
1

パディングやマージンオプションを使用して、ファンシーボックスの上部にスペースを設定し、写真が画面の中央に表示されるようにすることができます。

パディング-コンテンツの周りのfancyBox内のスペース。配列として設定可能-[上、右、下、左]

margin-ビューポートとfancyBoxの間の最小スペース。配列として設定可能-[上、右、下、左]

http://fancyapps.com/fancybox/#docs

于 2013-03-04T03:36:21.903 に答える
1

私は自分に合った解決策を見つけました。

これは、ここに投稿されたすべての回答に大きく基づいているので、ありがとうございます。可能であれば、すべての賞金を差し上げます。

私がしたのはこれでした。

CSSで設定.fancybox-title{height:0px !important;}し、すぐ下にスタイルを追加します（後で使用します）。.fancybox-title-autoheight{height:auto !important;}

次に、fancyboxのjquery呼び出しで、set autoResize: false、およびmin-Height: $(window).height()-100、<-100は、画像の下にさらに多くのコンテンツがあることにユーザーが気付くために必要なマージンです。

最後に、afterShow関数で、$(".fancybox-title").addClass("fancybox-title-autoheight");

これにより、最初に開いたときに写真のサイズが適切になり、コメントを下に表示できるようになります。残っている唯一の問題は、ウィンドウのサイズが変更されたときです。autoheightクラスを削除し、updateを呼び出してから、CSS属性を再度追加しようとしましたが、機能していないようです。今のところ、これは私にとって許容できる解決策です。

結果を確認してください（キャッシュをクリアする必要があるかもしれません。私は最近取り組んでいます）：http ：//www.thejoecole.com/gallery/Places/Garden_of_the_Gods-1/photo-8#8

参加してくださった皆様、ありがとうございました！複数の回答を正解としてマークする方法がある場合は、お知らせください。私が編集した元のアイデアが認識されるように、そのようにします。

于 2013-03-13T21:35:00.483 に答える
0

fancyboxがすでに開いていて、サイズを変更したい場合は、以下のコードが役立ちます。

$.ajax({
            url: 'YOUR URL',
            data:'DATA WANT TO TRANSFER',
            type: 'post'
            dataType: "text",
            success:function(result){                       
                //PLAY WITH RESULT SET

                $.fancybox.toggle();

            },
            error:function(request,error){
                alert("Error occured : "+error);

            }
        });

参照元：Fancyboxのサイズ変更

于 2014-12-23T10:35:08.230 に答える