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彈出式窗口，代碼中發現錯誤的問題

回答

相關問題