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 に答える