Fancybox弹出式窗口，代码中发现错误的问题

试图为我的vimeo视频获取弹出式灯箱。我尝试了大约6种不同的种类，似乎无法让他们工作。任何人都可以在Lightbox中看到代码中的问题。我收到链接到实际VIMEO页，而不是它只是在同一页面上弹出Fancybox弹出式窗口，代码中发现错误的问题

这是的fancybox代码，剩下的就是全码：

<div id="video"><a class="fancybox" rel="group" href="https://vimeo.com/63197306"><img src="Images/video_pic.png" name="video_pic" width="638" height="391" id="video_pic"></a></div> 



<!DOCTYPE HTML><html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Motivational Productions</title> 
<link href="main.css" rel="stylesheet" type="text/css"> 
<script tpe="text/javascript" src= src="FancyBox/lib/jquery-1.9.0.min.js"></script> 
<link href="FancyBox/jquery.fancybox.css" rel="stylesheet" type="text/css"> 
</head><body> 
<div id="content_wrap"> 
    <div id="header"> 
     <div id="logo_drop"><img src="Images/opaque_image-01-01.png" width="195" height="150"></div> 
     <div id="logo"><img src="Images/main_logo-01-01.png" width="434" height="140"></div> 
<div id="social"> 
      <div id="twitter_icon"><img src="Images/twitter_icon.png" width="25" height="25"></div> 
      <div id="facebook_icon"><a href="https://www.facebook.com/motivationalpro"><img src="Images/facebook_icon.png" width="25" height="25"></a></div> 
      <div id="vimeo_icon"><a href="https://vimeo.com/user2662413"><img src="Images/vimeo_icon.png" width="25" height="25"></a></div> 
     </div> 
     <div id="learn">Learn More About Us»</div> 
     <div id="get_in_touch">Get In Touch»</div> 
    </div> 
    <div id="space"></div> 
<div id="content"> 
     <div id="slider"> 
      <div id="right_pic"><img src="Images/right_pic.png" width="609" height="342"></div> 
      <div id="video"><a class="fancybox" rel="group" href="https://vimeo.com/63197306"><img src="Images/video_pic.png" name="video_pic" width="638" height="391" id="video_pic"></a></div> 
      <div id="left_pic"><img src="Images/left_pic.png" width="760" height="439"></div> 
</div> 
    </div> 
<div id="footer"> 
<div id="footer_wrap"> 
     <div id="footer_header"><div id="footer_img"><img src="Images/footer_header-01.png" name="footers_img" width="948" height="54" id="footers_img"></div></div> 
     <div id="footer_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </div> 
     <div id="footer_get_in_touch">Get In Touch»</div> 
     <div id="footer_learn_about">Learn More About Us»</div> 
     </div> 
    </div> 
    <div id="space"></div> 
</div> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $(".fancybox").fancybox(); 
}); 
</script> 
</body> 
</html>

来源

2013-04-22 aceer15

如果上面的代码正是你所拥有的，那么你缺少装载的fancybox js文件。你也有一个额外的'src'在这行''script tpe =“text/javascript”src = src =“FancyBox/lib/jquery-1.9.0.min.js”>'AND typo：'tpe' should是'类型'。如果您有HTML5 DOCTYPE，则可以删除该属性。检测这些错误的最好方法是验证您的代码并使用浏览器（Firefox）附件来检测哪些脚本和CSS样式表已成功加载，否则请检查您的路径。 – JFK 2013-04-23 02:30:27

您需要添加一个附加类fancybox.iframe添加到您的fancybox元素。此外，您还需要更新您的Vimeo链接http://player.vimeo.com/video/63197306?autoplay=1

更改此块

<div id="video"> 
    <a class="fancybox" rel="group" href="https://vimeo.com/63197306"> 
    <img src="Images/video_pic.png" name="video_pic" width="638" height="391" id="video_pic"> 
    </a> 
</div>

到

<div id="video"> 
    <a class="fancybox fancybox.iframe" rel="group" href="http://player.vimeo.com/video/63197306?autoplay=1"> 
    <img src="Images/video_pic.png" name="video_pic" width="638" height="391" id="video_pic"> 
    </a> 
</div>

来源

2013-04-23 18:37:27 adamdehaven

Fancybox弹出式窗口，代码中发现错误的问题

回答

相关问题