如何启动页面加载jQuery Fancybox？
我想在页面加载时启动Fancybox（例如Fancybox的模式或灯箱版本）。 我可以将它绑定到一个隐藏的锚标签，并通过JavaScript激发该锚标签的单击事件，但我宁愿直接启动Fancybox并避免额外的锚标签。
Fancybox目前不直接支持自动启动的方式。 我周围的工作能够开始工作是创build一个隐藏的锚标记并触发它的单击事件。 确保包含jQuery和Fancybox JS文件后，您的调用触发单击事件。 我使用的代码如下：
此示例脚本直接embedded在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会因为两者的加载顺序而感到不安。 这给你留下了两个select：把所有东西都改成window.load或者使用setTimer（）。
或者在你的fancybox设置后在JS文件中使用它：
$('#link_id').trigger('click');
我相信Fancybox 1.2.1将使用默认选项，否则从我的testing，当我需要这样做。
为什么不是这个答案呢？
$("#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主页得到这个
我发现的最好的方法是：
<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>
对于我的情况，以下可以成功工作。 当页面被加载时，灯箱立即popup。
JQuery：1.4.2
Fancybox：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的回答很好。 但重要的是要注意，这就是默认的fancybox风格。 如果你有自己的自定义规则，你应该调用.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'); });
我实际上设法只使用“live”事件从外部JS文件触发fancyBox链接：
首先，在您未来的dynamic锚点上添加实时点击事件：
$('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链接现在“几乎”准备就绪。 为什么“差不多”？ 因为看起来你需要在触发第二次点击之前添加一些延迟，否则脚本还没有准备好。
这是一个快速和肮脏的延迟使用我们的锚上的一些animation，但它运作良好：
$('a.pub').slideDown('fast', function() { $('a.pub').click(); });
在这里，你的fancyBox应该出现onload！
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; }
DOM准备就绪后，您还可以使用原生JavaScript函数setTimeout()来延迟显示框。
<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>
如果你没有button点击。 我的意思是如果你想打开它的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的触发function
$( window ).load(function() { $("#clickbanner").trigger('click'); });
