Question

尝试为我的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>

Answer 1

您需要在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>

Fancybox弹出，在代码中找不到错误

1 个答案: