【发布时间】：2013-11-30 21:24:55
【问题描述】：
我一直无法让 fancybox 正常工作，以便 youtube 视频以灯箱方式显示。
相反，他们直接进入 youtube 视频的全屏视图，我认为这意味着 fancybox js 崩溃了。
这可能是由于页面上使用了其他 js，但我浏览了几个帮助站点并没有发现任何内容 - 希望您能提供帮助？
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0">
<!----Fancybox--->
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!---Cookie Bar--->
<link rel="stylesheet" type="text/css" href="css/jquery.cookiebar.css" />
<script type="text/javascript" src="js/jquery.cookiebar.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function(){
$.cookieBar({
declineButton: true,
});
});
});
if(jQuery.cookieBar('cookies')){
cookie content here
}
</script>
</head>
<body>
<!---Desktop/tablet display links as responsive image maps--->
<div class="hotspot">
<img name="animations" src="images/bigpic1.jpg" width="1280" height="878" id="animations" usemap="#m_animations" alt="" /><map name="m_animations" id="m_animations">
<area shape="poly" coords="620,598,1018,598,736,0,702,1,518,387,719,387,620,598" class="fancybox.iframe" href="http://www.youtube.com/embed/genericlinkhere.html" title="my title" alt="my alt tag" />
</map>
</div>
<!---Mobile display links--->
<div class="mob_gal">
<a class="fancybox.iframe" href=www.youtube.com/embed/genericlinkhere.html title="my title" alt="my alt tag"><img src="images/pic1.jpg" width="100%"/></a>
</div>
<!---Mobile Navigation--->
<script src="js/mini_nav.js"></script>
<script src="js/doubletaptogo.js"></script>
<script type="text/javascript">
$( function()
{
$( '#nav li:has(ul)' ).doubleTapToGo();
});
</script>
<!---Responsive Image Maps--->
<script src="js/jquery.rwdImageMaps.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
<!---Fancybox Opener--->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
</body>
</html>
【问题讨论】：