ページの読み込み時にjQuery Fancyboxを起動する方法は？
https://stackoverflow.com/questions/807271
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
ページの読み込み時にFancybox（例： Fancyboxのモーダルボックスまたはライトボックスのバージョン）を起動したい。非表示のアンカータグにバインドし、JavaScriptを介してそのアンカータグのクリックイベントを発生させることもできますが、Fancyboxを直接起動し、余分なアンカータグを回避したいです。
解決
Fancyboxは現在、自動的に起動する方法を直接サポートしていません。私が仕事をすることができた回避策は、非表示のアンカータグを作成し、クリックイベントをトリガーすることです。 jQueryおよびFancybox JSファイルが含まれた後に、クリックイベントをトリガーする呼び出しが含まれていることを確認してください。使用したコードは次のとおりです。
このサンプルスクリプトはHTMLに直接埋め込まれていますが、JSファイルに含めることもできます。
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>
他のヒント
ドキュメントの準備でこの関数を呼び出すことで、これが機能するようになりました：
$(document).ready(function () {
$.fancybox({
'width': '40%',
'height': '40%',
'autoScale': true,
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'iframe',
'href': 'http://www.example.com'
});
});
簡単：
最初に次のように要素を非表示にします：
<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>
Window.load（document.ready（）とは対照的に）は、 Fancybox 2.0のJSFiddler onloadデモで使用されるトリックのようです。：
$(window).load(function()
{
$.fancybox("test");
});
他の場所でdocument.ready（）を使用している可能性があることに注意してください。IE9は2つのロード順序に混乱します。これにより、2つのオプションが残ります。すべてをwindow.loadに変更するか、setTimer（）を使用します。
または、fancyboxのセットアップ後にJSファイルでこれを使用します：
$('#link_id').trigger('click');
Fancybox 1.2.1では、必要に応じてテストからデフォルトオプションを使用すると信じています。
なぜこれはまだ答えではないのですか？：
$("#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
});
});
リンクをトリガーするだけです!!
からこれを入手しました私が見つけた最良の方法は：
<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>
私の場合、以下が正常に機能します。ページがロードされると、ライトボックスがすぐにポップアップします。
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>
Alexの答えは素晴らしいです。しかし、それはデフォルトのファンシーボックススタイルを呼び出すことに注意することが重要です。独自のカスタムルールがある場合は、その特定のアンカーをクリックして.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');
});
<！> quot; live <！> quot;を使用して、外部JSファイルからのみfancyBoxリンクをトリガーすることができました。イベント：
最初に、将来の動的アンカーにライブクリックイベントを追加します。
$('a.pub').live('click', function() {
$(this).fancybox(... fancybox parameters ...);
})
次に、本体にアンカーを追加します：
$('body').append('<a class="iframe pub" href="your-url.html"></a>');
次に<！> quot; clicking <！> quot;によってfancyBoxをトリガーします。アンカー：
$('a.pub').click();
fancyBoxリンクが<！> quot; almost <！> quot;準備ができて。なぜ<！> quot;ほぼ<！> quot; ？ 2回目のクリックをトリガーする前に遅延を追加する必要があるように見えます。そうしないと、スクリプトの準備ができていません。
アンカーでアニメーションを使用すると、迅速で汚れた遅延になりますが、うまく機能します。
$('a.pub').slideDown('fast', function() {
$('a.pub').click();
});
これで、fancyBoxがロード中に表示されます！
HTH
これが役立つかもしれません...これはフルサイズの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;
}
ネイティブ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>
クリックするボタンがない場合。つまり、ajax応答で開く場合は、次のようになります：
$.fancybox({
href: '#ID',
padding : 23,
maxWidth : 690,
maxHeight : 345
});
$(document).ready(function() {
$.fancybox(
'<p>Yes. It works <p>',
{
'autoDimensions' : false,
'width' : 400,
'height' : 200,
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);
});
これは役立ちます。
jqmodal を使用できます。これは軽量で使いやすいです。モーダルボックスを表示するには、
を呼び出します。$('.box').jqmShow()
このようなリンクを配置できます（非表示になります。</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');
});
HTML：
<a id="hidden_link" href="LinkToImage"></a>
JS：
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>
