0

试图为我的 vimeo 视频获取弹出式灯箱。我已经尝试了大约 6 种不同的类型，但似乎无法让它们工作。任何人都可以在灯箱的代码中看到问题。我正在链接到实际的 vimeo 页面，而不是它只是在同一页面上弹出

这是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>
4

1 回答 1

0

您需要为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-23T18:37:27.460 回答