ページの読み込み時にjQuery Fancyboxを起動する方法は？

95

ページの読み込み時にFancybox（モーダルまたはライトボックスのFancyboxのバージョンなど）を起動したいと思います。これを非表示のアンカータグにバインドし、JavaScriptを介してそのアンカータグのクリックイベントを発生させることができますが、代わりにFancyboxを直接起動して余分なアンカータグを回避します。

jquery  jquery-plugins  fancybox 
— ブレガー
ソース
公式のfancybox Webサイト（fancybox.net）にアクセスすると、自動ポップアップが表示されるので、ページのソースをチェックして、その方法を確認できます（ヒント：承認された回答とは
— 異なり
15
他の人のために時間を節約する-$（function（）{$ .fancybox（ '<div> Change me </ div>'、{padding：20}）;}）;
— nikib3ro

回答:

162

Fancyboxは現在、自動的に起動する方法を直接サポートしていません。私が機能するようになった回避策は、非表示のアンカータグを作成し、クリックイベントをトリガーすることです。jQueryおよびFancybox JSファイルが含まれた後に、クリックイベントをトリガーする呼び出しが含まれていることを確認してください。私が使用したコードは次のとおりです。

このサンプルスクリプトはHTMLに直接埋め込まれていますが、JSファイルに含めることもできます。

<script type="text/javascript">
    $(document).ready(function() {
        $("#hidden_link").fancybox().trigger('click');
    });
</script>
— ブレガー
ソース
1
ただ参考までに、$（document）.ready（function（）{$（ "＃hidden_​​link"）。fancybox（）。trigger（ 'click'）;}）; 次と同じです：function LaunchFancyBox（）{$（ "＃hidden_​​link"）。fancybox（）。trigger（ 'click'）; } $（document）.ready（LaunchFancyBox（））;
— マークシュルタイス
4
同じである$(document).ready(LaunchFancyBox());べきです$(document).ready(LaunchFancyBox);。（最後に関数呼び出しがないことに注意してください）。
— Adam Luter、2010
私はこれを試しましたが、成功しませんでした。私はその後、私はコンテンツを渡す... {（$ .fancyboxを呼び出すAjaxを介してコンテンツをロードする必要がありました。
— giubueno
@Bleggerソリューション$（ "＃hidden_​​link"）。fancybox（）。trigger（ 'click'）; 私にぴったりです。
— ムケシュ2014
66

準備ができたドキュメントでこの関数を呼び出すことでこれを機能させました：

$(document).ready(function () {
        $.fancybox({
            'width': '40%',
            'height': '40%',
            'autoScale': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'type': 'iframe',
            'href': 'http://www.example.com'
        });
});
— ヨルダンC
ソース
これは、hrefパラメータの処理で問題が発生したため、うまくいきませんでした。「待機」アニメーションは永久に表示されます。
— ボリス・ファン・シューテン、2011
3
これはfancybox開発者自身が行う方法のように思われることに注意する価値があります。fancybox Webサイト（fancybox.net）にアクセスすると、「fancybox2がリリースされました！」というモーダルダイアログが表示されます。...そのページのソースを見ると、彼らがこの回答で説明されている手法を使用していることがわかります。
— ニッピサウルス
これは受け入れられる答えになるはずです！受け入れられたソリューションは機能していますが、クリックイベントをトリガーするための非表示のアンカーを追加することは、実際には最もクリーンな方法ではありませんか？
— luigi7up 2013年
隠されたリンクを使用することはハックです。ちゃんとして。
— Jamsi 2014年
とてもシンプル！ありがとう！自動再生のYouTubeが埋め込まれています。ビデオが終了したらすぐにライトボックスを閉じる方法はありますか？
— アントニオアルメイダ
12

それは簡単です：

最初に次のように要素を非表示にします。 

<div id="hidden" style="display:none;">
    Hi this is hidden
</div>

次に、javascriptを呼び出します。

<script type="text/javascript">
    $(document).ready(function() {
        $.fancybox("#hidden");
    });
</script>

以下の画像をご覧ください。

ここに画像の説明を入力してください

もう一つの例： 

<div id="example2" style="display:none;">
        <img src="http://theinstitute.ieee.org/img/07tiProductsandServicesiStockphoto-1311258460873.jpg" />
    </div>

 <script type="text/javascript">
        $(document).ready(function() {
            $.fancybox("#example2");
        });
    </script>

ここに画像の説明を入力してください

— ヒシャム・ムニエ
ソース
10

（document.ready（）とは対照的に）Window.loadは、Fancybox 2.0のJSFiddler onloadデモで使用されているトリックであると思われます。

$(window).load(function()
{
    $.fancybox("test");
});

あなたが別の場所でdocument.ready（）を使用している可能性があることを念頭に置いてください。これにより、2つのオプションが残ります。すべてをwindow.loadに変更するか、setTimer（）を使用します。

— クリスS
ソース
この答えは、ページがiosのような警告ポップアップで始まり、次に閉じることができるようにしたい場合、私にとってはうまくいきます。私がそれを実装しようとしたときに最も人気のある答えはそれを作ったので、いつでもfancybox.closeをクリックしたとき、要素が消えるのではなく再ロードされました。ありがとう！
— Nathaniel Flick
あなたの回答は最も関連性が高く、100％正解です。ありがとう。
— Schalk Keun 2016年
8

または、fancyboxのセットアップ後にJSファイルでこれを使用します。

$('#link_id').trigger('click');

私は、Fancybox 1.2.1がデフォルトのオプションを使用することになると思います。それ以外の場合は、必要に応じて、私のテストとは異なります。

— cynge13
ソース
5

なぜこれがまだ答えになっていないのですか？：

$("#manual2").click(function() {
    $.fancybox([
        'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg',
        'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
        {
            'href'  : 'http://farm5.static.flickr.com/4005/4213562882_851e92f326.jpg',
            'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
        }
    ], {
        'padding'           : 0,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'image',
        'changeFade'        : 0
    });
});

今すぐあなたのリンクをトリガーしてください!!

ファンシーボックスのホームページからこれを手に入れました

— トーマス
ソース
5

私が見つけた最良の方法は：

<script type="text/javascript">
    $(document).ready(function() {
        $.fancybox(
             $("#WRAPPER_FOR_hidden_div_with_content_to_show").html(), //fancybox works perfect with hidden divs
             {
                  //fancybox options
             }
        );
    });
</script>
— アリーナ
ソース
オプションの閉じ括弧がコメント化されているため、これは失敗します。
— Teekin
¡清潔で簡単！完璧に動作します。よろしくお願いします！
— カロライナ
4

私の場合、以下がうまく機能します。ページが読み込まれると、ライトボックスがすぐにポップアップします。

jQuery：1.4.2

ファンシーボックス：1.3.1

<body onload="$('#aLink').trigger('click');">
<a id="aLink" href="http://www.google.com" >Link</a></body>
<script type="text/javascript">
    $(document).ready(function() {

        $("#aLink").fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });
    });
</script>
— CMen
ソース
3

アレックスの答えは素晴らしいです。ただし、これはデフォルトのファンシーボックススタイルを呼び出すことに注意してください。独自のカスタムルールがある場合は、その特定のアンカーで.trigger clickを呼び出すだけです。

$(document).ready(function() {
$("#hidden_link").fancybox({ 
    'padding':          0,
    'cyclic':       true,
    'width':        625,
    'height':       350,
    'padding':      0, 
    'margin':      0, 
    'speedIn':      300,
    'speedOut':     300,
    'transitionIn': 'elastic',
    'transitionOut': 'elastic',
    'easingIn':     'swing',
    'easingOut':    'swing',
    'titleShow' : false
}); 
    $("#hidden_link").trigger('click');
});
— アンドリュースコットキムレイ
ソース
2

「ライブ」イベントを使用して、外部JSファイルからのみfancyBoxリンクをトリガーすることができました。

まず、将来の動的アンカーにライブクリックイベントを追加します。

$('a.pub').live('click', function() {
  $(this).fancybox(... fancybox parameters ...);
})

次に、アンカーを本文に追加します。

$('body').append('<a class="iframe pub" href="your-url.html"></a>');

次に、アンカーを「クリック」してfancyBoxをトリガーします。

$('a.pub').click();

これで、fancyBoxリンクは「ほぼ」準備できました。なぜ「ほとんど」？2回目のクリックをトリガーする前に遅延を追加する必要があるように見えるため、それ以外の場合はスクリプトの準備ができていません。

これは、アンカーでアニメーションを使用した迅速で汚い遅延ですが、うまく機能します。

$('a.pub').slideDown('fast', function() {
  $('a.pub').click();
});

これで、fancyBoxがオンロードで表示されます。

HTH

— カプセル
ソース
1

多分これは役立つでしょう...これはフルサイズのjQueryカレンダークリックイベント（http://arshaw.com/fullcalendar/）で使用されていました...しかし、jQueryによって起動されているfancyboxを処理するためにより一般的に使用できます。

  eventClick: function(calEvent, jsEvent, view) {
      jQuery("body").after('<a id="link_'+calEvent.url+'" style="display: hidden;" href="http://thisweekinblackness.com/wp-content/uploads/2009/01/steve-urkel.jpg">Steve</a>');
      jQuery('#link_'+calEvent.url).fancybox(); 
      jQuery('#link_'+calEvent.url).click();
      jQuery('#link_'+calEvent.url).remove();
    return false;
  }
— リー
ソース
1

また、ネイティブJavaScript関数setTimeout()を使用して、DOMの準備ができた後にボックスの表示を遅らせることもできます。

<a id="reference-first" href="#reference-first-message">Test the Popup</a>

<div style="display: none;">
    <div id="reference-first-message" style="width:400px;height:100px;overflow:auto;">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $("#reference-first").fancybox({
            'titlePosition'         : 'inside',
            'transitionIn'          : 'fade',
            'transitionOut'         : 'fade',
            'overlayColor'          : '#333',
            'overlayOpacity'        : 0.9
        }).trigger("click");

        //launch on load after 5 second delay
        window.setTimeout('$("#reference-first")', 5000);
    });
</script>
— ジョン・ケイリー
ソース
1

クリックするボタンがない場合。つまり、ajax応答で開きたい場合は、次のようになります。

$.fancybox({
      href: '#ID',
      padding   : 23,
      maxWidth  : 690,
      maxHeight : 345
});
— マハデブ
ソース
1 
$(document).ready(function() {
    $.fancybox(
      '<p>Yes. It works <p>',
       {
        'autoDimensions'    : false,
        'width'             : 400,
        'height'            : 200,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'
       }
    );
});

これは役立ちます。

— プラバガラン
ソース
0

このようにリンクを貼ることができます（非表示になります。以前の場合もあります</body>）

<a id="clickbanner" href="image.jpg" rel="gallery"></a>

そして、このような作業中のrel属性またはクラス

$(document).ready(function() {
    $("a[rel=gallery]").fancybox({
        openEffect  : 'elastic',
        closeEffect : 'elastic',
        maxWidth    : 800,
        maxHeight   : 600
    });
});

jqueryトリガー関数でそれを行うだけです 

$( window ).load(function() {
  $("#clickbanner").trigger('click');
});
— Nixis
ソース
0

HTML：

<a id="hidden_link" href="LinkToImage"></a>

JS：

<script type="text/javascript">
    $(document).ready(function() {
        $("#hidden_link").fancybox().trigger('click');
    });
</script>
— AnasSafi
ソース
1
このコードは質問に答えることがありますが、問題を解決する方法および/または理由に関する追加のコンテキストを提供すると、回答の長期的な価値が向上します。
— Nic3500 2018
-1

多分あなたはjqmodalを使うことができます、それは軽量で使いやすいです。呼び出すことでモーダルボックスを表示できます

$('.box').jqmShow()
— リンボーイ
ソース
それはFancyBoxのクラスではないので、私はこの作品を考えていない
— ホセ・バシリオ
1
私のデザイナーはFancyboxのルックアンドフィールを望んでおり、jqmodalに実装しようとする努力を省きたいと思います。さらに、サイトではすでにFancyboxを使用しており、2つの異なるライトボックス実装をサポートしたくありません。
— Blegger 2009
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.