如果我在html的主页面中添加精美的盒子代码，那么fancybox在页面加载时不会打开...如果我在页脚的页面添加fancybox代码然后fancybox打开但我的网站滑块无法显示...我希望如果某个网站打开然后在页面加载fancybox show和幻灯片放映也显示
这是我的index.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>123</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.6.js" ></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/cufon-replace.js"></script>
<script type="text/javascript" src="js/Forum_400.font.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/tms-0.3.js"></script>
<script type="text/javascript" src="js/tms_presets.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/atooltip.jquery.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<style type="text/css">
.slider_bg {behavior:url(js/PIE.htc)}
</style>
<![endif]-->
<!--[if lt IE 7]>
<div style='clear:both;text-align:center;position:relative'>
<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" /></a>
</div>
<![endif]-->
</head>
<body id="page1">
<div class="body6">
<div class="body1">
<div class="body5">
<div class="main">
<p>
<!-- header -->
</p>
<p> </p>
<p> </p>
<p> </p>
<div class="ic">sara rubab</div>
<!-- / header -->
<!-- content -->
<article id="content">
<div class="slider_bg">
<div class="slider">
<ul class="items">
<li>
<img src="images/img1.jpg" alt="">
<div class="banner">
<strong>Frnd<span>Best</span></strong>
<b>congra</b>
<p>
<span>Lorem ipsum dolamet consectetur<br>
adipisicing elit, sed do eiusmod tempor aliqua enim ad minim veniam, quis nosinci- didunt ut labore et dolore.</span>
</p>
</div>
</li>
<li>
<img src="images/img2.jpg" alt="">
<div class="banner">
<strong>what<span>one</span></strong>
<b>life of tipsum</b>
<p>
<span>Lorem ipsum dolamet consectetur <br>
adipisicing elit, sed do eiusmod tempor aliqua enim ad minim veniam, quis nosinci- didunt ut labore et dolore.</span>
</p>
</div>
</li>
<li>
<img src="images/img3.jpg" alt="">
<div class="banner">
<strong>NWE<span>EX</span></strong>
<b>sdsd</b>
<p>
<span>Lorem ipsum dolamet consectetur <br>
adipisicing elit, sed do eiusmod tempor aliqua enim ad minim veniam, quis nosinci- didunt ut labore et dolore.</span>
</p>
</div>
</li>
</ul>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</body>
</html>
这是使用youtube视频加载页面的fancybox代码
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.yambi.tk/fancybox/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.yambi.tk/fancybox/jquery.fancybox-1.3.1.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
$("#yt").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
});
$('#foo').bind('click', function() {
alert($(this).text());
});
$('#foo').trigger('click');
</script>
</head>
<body onload='$("#yt").trigger("click");'>
<p><a id="yt" title="" href="http://www.youtube.com/watch?v=2y8G7wMgIPY&fs=1&autoplay=1"></a></p>
答案 0 :(得分：0)
您可以从html开始简化代码，并以embed模式打开YouTube视频：
<p><a id="yt" title="" href="http://www.youtube.com/embed/3l8MwU0IjMI?wmode=opaque&fs=1&autoplay=1"></a></p>
然后您的fancybox代码可以像
一样简单$(document).ready(function () {
$("#yt").fancybox({
'padding': 0,
'width': 680,
'height': 495,
'type': 'iframe' // using embed mode
}).trigger("click");
});
参见 JSFIDDLE