我目前正在尝试让fancyBox jQuery插件在网站首页加载时自动打开。我对Javascript和jQuery很陌生,需要一些指导。
我的HEAD标签之间有下面的代码。只是想知道是否有其他的东西我可以在这里插入,我可以让fancyBox在页面加载时打开。
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
我在fancyBox的文档中发现了以下的API方法,不知道这是否是我要找的东西。我似乎无法让它工作。
$.fancybox.open( [group], [options] )
有什么好办法吗?
设置成这样...
<a id="my-custom-trigger" class="gallery" href="http://moviebuzzers.com/wp-content/uploads/2012/08/paranorman-still.jpg">
<img src="http://moviebuzzers.com/wp-content/uploads/2012/08/paranorman-still.jpg" height="100"/>
</a>
锚与ID'my-custom-trigger'是触发器->如果你点击它,fancybox弹出,所以你需要'点击'它后,页面加载自动......
// Use document ready event, or window load,
// whichever one suits you the best...
$(window).load(function(){
// Simulate click on trigger element
$('#my-custom-trigger').trigger('click');
});
现在,你已经完成了!
如果你使用的是fancybox 2,那么你有两个选择,一个是 triggering another element
正如你在接受的答案中所看到的,其他的是 manually trigger
所见
如上所述 http:/fancyapps.comfancybox#examples (在页面加载部分启动fancyBox)只需将onload改为任何你想要的。
简单的用法。
$.fancybox.open(['#container_div1','#container_div1']);
另外你可以试试这个。
<script type="text/javascript">
$(document).ready(function () {
$.fancybox({
'href': '#my_div'
});
});
</script>
$(document).ready(function() {
$('#popup_box').fancybox().trigger('click');
});
用2.1.5版本测试
$(window).load(function(){
$.fancybox.open('image.jpg');
});
$.fancybox(
{
'title':'Title',
'overlayColor': '#000',
'href' :'index.html',
'overlayOpacity': 0.7
}
);
$(window).load(function(){
// Simulate click on trigger element
fancy = $(".fancybox").fancybox();
$.fancybox.open( fancy )
});