web-dev-qa-db-ja.com

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

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

jqueryjquery-pluginsfancybox
94
Blegger

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

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

<script type="text/javascript">
    $(document).ready(function() {
        $("#hidden_link").fancybox().trigger('click');
    });
</script>
160
Blegger

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

$(document).ready(function () {
        $.fancybox({
            'width': '40%',
            'height': '40%',
            'autoScale': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'type': 'iframe',
            'href': 'http://www.example.com'
        });
});
65
JordanC

それは簡単です：

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

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

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

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

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

enter image description here

もう一つの例：

<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>

enter image description here

11
Hisham Muneer

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

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

他の場所でdocument.ready（）を使用している可能性があることを念頭に置くと、IE9は2つのロード順序に腹を立てます。これにより、2つのオプションが残ります。すべてをwindow.loadに変更するか、setTimer（）を使用します。

10
Chris S

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

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

それ以外の場合は、Fancybox 1.2.1でテストする必要があったときにデフォルトオプションを使用すると思います。

8
cynge13

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

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

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

これを Fancyboxホームページ から取得しました

6
Thomas

私が見つけた最良の方法は次のとおりです。

<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>
5
arena-ru

私の場合、以下が正常に機能します。ページがロードされると、ライトボックスがすぐにポップアップします。

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>
4
CMen

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

$(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');
});
3
Andrew Scott Kimrey

実際には、「ライブ」イベントを使用して外部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

2
Capsule
$(document).ready(function() {
    $.fancybox(
      '<p>Yes. It works <p>',
       {
        'autoDimensions'    : false,
        'width'             : 400,
        'height'            : 200,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none'
       }
    );
});

これは役立ちます。

1
Prabhagaran

また、ネイティブの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
John Kary

多分これは役立つでしょう...これはフルサイズの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
Leigh

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

$.fancybox({
      href: '#ID',
      padding   : 23,
      maxWidth  : 690,
      maxHeight : 345
});
1
Maha Dev

このようなリンクを配置できます（非表示になります。</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');
});
0
nixis

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

$('.box').jqmShow()
0
limboy

HTML：

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

JS：

<script type="text/javascript">
    $(document).ready(function() {
        $("#hidden_link").fancybox().trigger('click');
    });
</script>
0
AnasSafi